1

アニメーションが完了する前に停止できません。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>
4

2 に答える 2

2

.stop()する方法です。関数内に移動してみてください。たとえば、24 行目以降と 25 行目前に移動してみてください。前に配置.live()すると、関数を配線する際に停止します。関数内に配置すると、新しいアニメーションを起動しようとしているときに停止します。

.animate()または、もう一度見てみると、7 行目、12 行目、17 行目のそれぞれの直前に配置されている可能性があります。

于 2012-05-07T03:33:34.207 に答える
2

stop選択した要素の現在実行中のアニメーションを停止します (ドキュメントを参照)。あなたが望むのは、ヘッダーが呼び出されるたびにすべてが停止することです。だからそれをしてください。

これを試して：

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. };
于 2012-05-07T03:35:29.493 に答える