如何停止Jquery中的動畫效果（停止方法）

Question

我是Jquery的新手，我試圖做一個動畫，但我無法弄清楚如何停止動畫。

我有3個圖像在3個錨標記中沒有相同的高度或寬度，這些圖像堆疊在一個div中。

我做了一個腳本，當你mouseenter（）圖像的圖像的寬度應該增加寬度20px，當你mouseleave（）的寬度應該達到預覽寬度。

我設法做到了這一點，但是當我用鼠標快速瀏覽圖片時，開始增長和縮小，佈局變得混亂。

我發現了幾個插件，可以做我需要的東西，但它們都使用寬度和高度相同的圖片。

如果有人可以幫助，我會非常感激。

這裏是用代碼http://jsfiddle.net/ClaudiuTicu/9kTft/2/

var original_w; 
$('.getBigger').on('mouseenter', function() { 
    original_w = $(this).find('img').width(); //add the width of thye image to the parent 
    original_h = $(this).find('img').height(); //add the height to the parent 

    if ($(this).find('img').is(':animated')) { } 
    else { 
     if ($(this).attr('style')) { } //has the style attribut 
     else { 
      $(this).css({ 
       'width': original_w, 
       'height': original_h 
      }); 
     } //dosen't have the style attribut 
    } 

    if ($(this).find('img').width() == original_w) { 
     $(this).find('img').animate({ 
      'width': original_w + 20 
     }).addClass('hovered'); 
    } //if the image width is equal with the parent's width 
    else { 

    } 


}).on('mouseleave', function() { 
    if ($(this).find('img').width() != original_w) { 
     $(this).find('img').animate({ 
      'width': original_w 
     }).removeClass('hovered'); 
    } 
    console.log(original_w); 
}); //end mouse leave 

Answer 1

使用.stop(true,true)的.animate()所有實例之前一個鏈接 - 它迫使動畫去它的最終狀態，並刪除所有排隊的動畫。

實施例：

$(this).find('img').stop(true,true).animate(...);