jquery - 在动画完成之前停止动画以重新启动它

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 )。你想要的是，每次调用 header 时一切都会停止。所以就这样做吧。

试试这个:

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. };