アニメーションが終了する前にアニメーションを停止して再起動する

Question

アニメーションが終了する前にアニメーションを停止するのに問題があります。 24行目から始まるコードは、ユーザーがアニメーションを再び実行できるようにするためのものです。これはうまくいきますが、アニメーションが終了する前にユーザーがクリックすると、問題が発生します。私はいくつかの同様の質問が見つかった.stop（）メソッドが推奨された。私は24行目の.liveの直前に.stop（）を含めてみましたが、うまくいかないようです。誰かが正しい方向に私を指差してくれますか？

1.<script type="text/javascript> 
2.$(document).ready(function() { 
3. header(); 
4. }); 
5. 
6. function header(){ 
7.  $("#title").delay(300).animate({ 
8.  left: "280px", 
9.  opacity: "0" 
10.  }, 2000 
11. ); 
12.  $("#subtitle1").delay(300).css({"visibility": "visible", "opacity": "0"}).animate({ 
13.  left: "500px", 
14.  opacity: "1" 
15.  }, 2000 
16. ); 
17.  $("#subtitle2").delay(300).css({"visibility": "visible", "opacity": "0"}).animate({ 
18.  left: "560px", 
19.  opacity: "1" 
20.  }, 2000 
21. ); 
22. }; 
23. 
24.$("#img").live('click',function(){ 
25. $("#title").css({"left": "220px", "opacity": "1.0"}); 
26.  $("#subtitle1").css({"left": "425px", "visibility": "hidden"}); 
27.  $("#subtitle2").css({"left": "615px", "visibility": "hidden"}); 
28.  header(); 
29. }); 
30.</script> 

Answer 1

stopは、現在選択された要素（see docs）のアニメーションを実行して停止します。あなたが望むのは、ヘッダーがすべて停止するように呼び出されるたびにです。だからそれをやりなさい。

6. function header(){ 

     $('#title, #subtitle1, #subtitle2').stop();   

7.  $("#title").delay(300).animate({ 
8.  left: "280px", 
9.  opacity: "0" 
10.  }, 2000 
11. ); 
12.  $("#subtitle1").delay(300).css({"visibility": "visible", "opacity": "0"}).animate({ 
13.  left: "500px", 
14.  opacity: "1" 
15.  }, 2000 
16. ); 
17.  $("#subtitle2").delay(300).css({"visibility": "visible", "opacity": "0"}).animate({ 
18.  left: "560px", 
19.  opacity: "1" 
20.  }, 2000 
21. ); 
22. }; 

Answer 2

.stop()です。関数内で移動してみてください。 24行目と25行目の前に置きます。.live()の前に置くと、関数が終了します。関数の中に入れておくと、新しいアニメーションが起動するようになります。

または再びそれを見て、おそらくわずか7行、12の各.animate()前に置き、そして17