jQuery动画的hover连续触发动画bug处理

一、问题

为元素设置hover上实现动画的效果，当鼠标反复快速进入元素时，动画会在鼠标停止后依然执行，导致动画和鼠标的动作不一致。

二、解决方法

要解决这种问题，可以使用jquery的stop()方法。

stop([clearQueue],[gotoEnd])：

有两个参数：

第一个参数[clearQueue]: 决定是否清除队列，设置为true，则清空队列，立即结束动画；

第二个参数[gotoEnd]： 决定当前正在执行的动画是否立即完成，设置为true，则完成队列，立即完成动画。

三、代码

源代码:

 $(".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);