jQuery动画的hover连续触发动画bug处理
⼀、问题
为元素设置hover上实现动画的效果,当⿏标反复快速进⼊元素时,动画会在⿏标停⽌后依然执⾏,导致动画和⿏标的动作不⼀致。⼆、解决⽅法
要解决这种问题,可以使⽤jquery的stop()⽅法。
stop([clearQueue],[gotoEnd]):
有两个参数:
第⼀个参数[clearQueue]: 决定是否清除队列,设置为true,则清空队列,⽴即结束动画;
第⼆个参数[gotoEnd]:决定当前正在执⾏的动画是否⽴即完成,设置为true,则完成队列,⽴即完成动画。
三、代码
jquery源码在线源代码:
$(".layer").hover(function(){
$(this).animate({left:0},500);
},function(){
$(this).animate({left:-100},500);
});
如果快速重复把⿏标移⼊移出该元素,就会产⽣"动画积累",⿏标停⽌移动后,积累的动画还会继续执⾏,直到执⾏完毕。
解决后的代码如下:
$(".layer").hover(function(){
$(this).stop(true).animate({left:0},500);
},function(){
$(this).stop(true).animate({left:-100},500);
});
也可以将第⼆个参数设置为true,让动画达到最后状态。  $(this).stop(false,true).animate({left:0},500);