jQuery - 割り込みアニメーション？

Question

ユーザーが何かをクリックすると、簡単なアニメーション効果を得るためにjQueryを使用しています。ただし、最初のアニメーションが完了する前に再度クリックすると、何も起こりません。最初のアニメーションが終了するまで待つ必要があります。

アニメーション処理を中断し、2回目のクリックが発生したときに最初から開始する方法はありますか？

ありがとうございました。

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"); });