首页 > web前端 > js教程 > jquery事件hover、mouseenter、mouseleave只触发一次动画

jquery事件hover、mouseenter、mouseleave只触发一次动画

黄舟
发布: 2017-06-28 10:05:18
原创
2695 人浏览过

jquery hover mouseenter mouseleave事件只触发一次动画

jquery.mouseenter(function(){
    $(div).animate({'margin-top':'100px'},1000)
})
jquery.mouseleave(function(){
    $(div).animate({'margin-top':'200px'},1000)
})
登录后复制

鼠标移动到某个div上,触发mouseenter事件和动画,移出触发mouseleave事件和动画,但是来回划过这个div,事件就被触发了多次,动画也要重复好几遍,怎么才能在动画执行过程中,不触发mouseenter、mouseleave事件呢,即动画过程中,鼠标划过这个div后,动画不会重复出现,只有动画完了 ,再划过,才会触发

你可以使用stop方法:

$(div).stop(false, true).animate({'margin-top':'100px'},1000);
登录后复制

如果stop()的第一个参数为true,表示立即清除当前的动画队列,默认为fx;如果第二个参数为true,表示立即将当前正在执行的动画置为它的结束状态。

执行动画前判断:

if (!$(obj).is(':animated')) {    // to do something
}
登录后复制

如果所选的Element没有在正在动画中状态,则执行动画。否则忽略

^_^ (碰到了从前清楚解答过的问题的表情)

这个被 @Humphry 称为“动画原子性问题”。就是说如果动画动作是一个不可重入的原子性过程,那么在代码中要如何实现这一特性。

一个很清楚的答案见这里。答案的方式是显而易见的标志位法:对准做动画的元素,动画开始时置标,结束时(用回调函数)去掉。有标志时不得触发启动动画的事件即可。

以上是jquery事件hover、mouseenter、mouseleave只触发一次动画的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板