基于jQuery的连续hover触发重复动画

本文来源于 捷搜索

问题：

当我们设置hover实现动画效果的时候，我们把鼠标快速反复在目标元素移来移去，会发现鼠标最后离开后，动画依然在进行很多次，有时会导致动画错乱。

原因&办法：

之所以会出现这种情况，是因为我们每次触发hover时都会执行一次动画，当我们来回这样快速移动到目标元素上时并反复操作，这时会导致动画重复多次，而由于我们移动到目标元素上时比较快速的，这就导致，上一次动画未结束，这次动画就紧接着来了，所以会导致动画的错乱。

我们解决这一情况的原理是：当我们触发hover时先清空之前所有的动画，并使当前正在执行的动画立马完成。

解决：

jQuery的stop方法可以解决上述的问题，

stop([clearQueue],[gotoEnd])：

第一个参数[clearQueue]: [false,true], 是否清除队列，若为true，则清空队列，立即结束动画；

第二个参数[gotoEnd]： [false,true],  当前正在执行的动画是否立即完成，若为true，则完成队列，立即完成动画；

在这里我们把两个参数都设置为true，当有多个动画时，再次触发hover执行动画时，会清空所有的动画队列 ，并且使正在执行的动画立即完成，然后再进行本次动画，这样就不会导致动画错乱。

$(".img").hover(function(){
    $(this).stop(true,true).animate({width:'150px'},800);
},function(){
    $(this).stop(true,true).animate({width:'100px'},800);
});

作者：捷搜索
链接：https://www.jianshu.com/p/299399168552