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