jquery hover事件只触发一次动画

最新推荐文章于 2021-10-27 17:13:30 发布

水中熊

最新推荐文章于 2021-10-27 17:13:30 发布

阅读量9.3k

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/gmd_web/article/details/50196575

版权

在实际工作中遇到jQuery hover事件导致动画重复播放的问题。当快速移动鼠标时，动画队列堆积，造成动画不一致。解决方案包括使用stop方法，如stop(true, true)以立即停止动画并清空队列，或者在执行动画前进行判断，防止重复触发。" 132107864,17393267,基于Android的医疗预约挂号系统设计与实现,"['Android开发', '前端开发', '后端开发', '数据库设计', '毕设指导']

摘要由CSDN通过智能技术生成

最近工作时遇到个关于动画的问题，如下：

$("div").hover(
    function() {
        $(this).animate({"margin-top":"100px"},1000);
    }, function() {
        $(this).animate({"margin-top":"200px"},1000);
    });

看代码就是一个简单的鼠标滑过的动画而已，但是当我测试的时候发现，当我发神经似的来回滑动时，事件就被触发了多次，动画也就重复了多次，怎么才能不重复出现，即动画过程中，鼠标滑过这个div，不会触发该事件那？

带着疑问，google之，

发现，原来为元素绑定hover事件之后，如果光标移入移出的速度太快，导致移入的动画还没执行完，就移出光标，则移出的动画效果就会被放到队列，等移入的动画完成后在执行。因此如果光标的移入移出速度太快，就会导致动画效果与移动光标不一致，出现重复出现的情况。

而解决办法有两种：

1、你可以使用jq的stop方法：