基于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);
});

 


原文请查看链接http://www.jsosuo.com/index.php/Blog/detail.html?d=84
---------------------
作者:捷搜索
来源:CSDN
原文:https://blog.csdn.net/jesslu/article/details/82422337
版权声明:本文为博主原创文章,转载请附上博文链接!

posted @ 2019-06-06 16:49  鳳舞九天  阅读(450)  评论(0编辑  收藏  举报