jQuery - 中斷動畫？

Question

一旦用戶點擊了某些東西，我就使用jQuery進行了一些簡單的動畫效果。但是，如果他們在第一個動畫完成之前再次點擊，則什麼也不會發生。他們必須等到第一個動畫結束。

是否有辦法中斷動畫過程，並在發生第二次點擊時從頭開始？

謝謝。

Answer 1

您可以使用stop()方法

HTML：

<input type="button" value="fade out" id="start"> 
<input type="button" value="stop" id="stop"> 
<div style="background-color: blue; height: 100px;">Testing</div> 

JS：

$("#start").click(function() { $("div").fadeOut("slow"); }); 
$("#stop").click(function() { $("div").stop(); }); 

編輯：上面的代碼進行測試和FF3工作。 5和IE8

在您想要中斷動畫的元素上使用該元素。

只要記住元素將停止動畫中間動畫。因此，您可能需要在停止後重置CSS，具體取決於您的情況。

edit2：從jQuery 1.7開始就有一些更新。您現在可以將動畫隊列與名稱進行分組。所以stop()方法將接受布爾值或字符串作爲第一個參數。如果它是一個布爾值，它將清除/不清除全部隊列。但是，如果您提供了一個字符串，那麼它只會清除該隊列組中的動畫。

Answer 2

聽起來像是dequeue的工作。

Answer 3

你可以重新推出動畫

$("#start").click(function() { $("div").stop().fadeOut("slow"); });