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中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
416
