禁用動畫序列的點擊功能

Question

我有一系列圖片來創建動畫。這可以通過使用下面的代碼來實現，但是我在開始一個新的動畫時遇到了多次點擊混淆的常見問題。

我需要能夠在動畫運行時禁用點擊或類似的效果。它可以禁用點擊直到動畫結束，或重置動畫以重新開始並清除當前正在運行的序列。

目前，我有以下代碼：

$(".startbutton").click(function() { 
$(this).clearQueue(function() { 

$(this).find("ul li:nth-child(1)").delay(124).animate({opacity: 0.0}, 0).delay(1860).animate({opacity: 1.0}, 0); 
$(this).find("ul li:nth-child(2)").delay(124).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(3)").delay(248).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(4)").delay(372).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(5)").delay(496).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(6)").delay(620).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(7)").delay(744).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(8)").delay(868).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(9)").delay(992).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(10)").delay(1116).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(11)").delay(1240).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(12)").delay(1364).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(13)").delay(1488).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(14)").delay(1612).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(15)").delay(1736).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(16)").delay(1860).animate({opacity: 1.0}, 0).delay(125).animate({opacity: 0.0}, 0); 
$(this).find("ul li:nth-child(17)").animate({opacity: 0.0}, 0).delay(1984).animate({opacity: 1.0}, 0); 

}); 
}); 

的.clearQueue我插入的動畫不再可以多次點擊和搞砸了的作品。但是，一旦動畫序列完成，動畫就不能再被點擊並且不會再次運行。

我猜我需要'清除''clearQueue'或類似的東西。

如果任何人有任何建議，將不勝感激。我曾嘗試使用人們在其他類似帖子中建議的'：animated'解決方案，這似乎是一個明智的解決方案，但迄今尚未解決問題。

Answer 1

好吧，由於OP提供了示例代碼，我將相應地修改此答案。

這裏的工作版本：

http://jsfiddle.net/qZGMW/

首先，使用標誌按我原來的建議是：

var started = false; 
$(selector).click(function() { 
    if (started) { return; } 
    started = true; 
    $(this).stop(); // Do not use clearQueue 
    // Do animation normally 
    $(lastOne).animate(param, param, function() { started = false; }); 
}); 

Answer 2

在this query API看看防止默認動作發生。

剛剛嘗試下面這段代碼片斷..

$(".startbutton").click(function(e) { 
    e.preventDefault(); 
    $(this).clearQueue(function() { 
    your code continues... 

Answer 3

通用規範建議：沒有爲同一形式的重複動作for loop。正如你在下面看到的，它使得代碼更短，更簡潔。關於您的主題，.clearQueue不會將回調函數作爲參數。在開始動畫之前調用它。 .stop也可能是有用的，你可以試驗效果，看看你喜歡什麼。

$(".startbutton").click(function() { 
    // $(this).clearQueue(); <- Correct usage, but unnecessary with .stop() 
    $(this).stop(true, true); 

    var $lis = $(this).find("ul li"); 
    $lis.stop(true, true); 

    $lis.filter(":nth-child(1)")//.delay(124) <- Unnecessary delay here? 
     .animate({opacity: 0.0}, 0).delay(1860).animate({opacity: 1.0}, 0); 

    for (var i=1; i< 16; i++) { 
     $lis.filter(":nth-child(" + i+1 + ")") 
      .delay(i * 124) 
      .animate({opacity: 1.0}, 0) 
      .delay(125) 
      .animate({opacity: 0.0}, 0); 
    } 

    $lis.filter(":nth-child(17)") 
     .animate({opacity: 0.0}, 0).delay(1984).animate({opacity: 1.0}, 0); 
});​