用用戶交互中斷動畫序列

Question

我有動畫序列，如果用戶不中斷應該完成直到結束。動畫是使用延遲實現的。例如

$element1.delay(1000).animate({left: 1000}, 5000); 
$element2.delay(2000).animate({left: 1000}, 5000); 
$element3.delay(3000).animate({left: 1000}, 5000); 
$element4.delay(4000).animate({left: 1000}, 5000); 

我這樣做的原因是因爲這對我來說很直觀，因爲每個動畫都完全獨立於其他動畫的時間。

假設我希望在2500毫秒標記處中斷動畫，並且一旦中斷，元素必須跳到其動畫狀態的末尾。現在，我嘗試在.find（：animated）選擇上使用.stop（false，true）函數。 $ element1和$ element2確實被中斷並跳轉到結束狀態，但由於$ element3和$ element4仍處於它們的.delay階段，因此它們不受影響。

什麼是最好和最簡單的方法來實現我想要的效果？謝謝

Answer 1

我想你正在尋找最近推出的finish()方法。如果您將stop()的jumpToEnd參數設置爲true，則它只會影響隊列中當前正在處理的項目。但是如果您撥打finish()，它將跳轉到整個隊列的最終結果。

小提琴：http://jsfiddle.net/SnTgS/

Finish() jQuery的1.9中引入的，但有一些錯誤後固定在1.10.1，所以你可能需要使用該版本和更新。

http://api.jquery.com/finish/

在早期版本的jQuery我想你可以遍歷隊列長度，並呼籲每個項目stop(false, true)在隊列中。