如何防止jQuery「fadeToggle」一遍又一遍地循環？

Question

我有一個關於jQuery的相對簡單的問題（請原諒我是一個noob）。我已經在div上使用了「fadeToggle」（點擊）功能來顯示另一個元素，但是如果用戶點擊了div說100次，我怎樣才能停止動畫播放一遍又一遍，每次點擊呢？

Answer 1

您需要設置某種在第一次迭代中激活的指標，然後在該函數的開頭檢查它。這可以是一個變量，也可以添加並檢查目標元素上的類名。

Answer 2

我見過，其中使用is running?類型的變量，這個問題的變化：

http://jsfiddle.net/VRDP9/

running = false; 

$("button:first").click(function() { 
    if (!running) { 
     running = true; 
     $("p:first").fadeToggle("slow", "linear", function() { running = false; }); 
    } 
});​ 

Answer 3

您也可以驗證隊列調用前空，

$("button").click(function() { 
    if (!$animatedElement.queue().length) { 
     $animatedElement.fadeToggle("slow", "linear"); 
    } 
});​ 

http://jsfiddle.net/EU5WK/

Answer 4

最簡單的方法是使用（停止） 例如：

<div id="hover_on_me_box>Hover on me!</div> 

<div style="display:none" id="hidden_box">Content....</div> 

$("#hover_on_me_box").hover(function() { 
    $("#hidden_box").stop().fadeToggle("500"); 
}); 

在這裏閱讀更多： http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup