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()是这样做的方法。尝试在功能中移动它 - 例如在第24行之后和第25行之前。将它放在.live()之前，在连接函数时将其停止。将它放在函数中会阻止它，因为你即将启动新动画。

或者再次查看它，也许放在第7,12和17行的每个.animate()之前。

Answer 2

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

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

2 个答案: