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中文网其它相关文章！
收藏
收藏
收藏
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
0
19
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
