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);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。