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停止当前为选定元素运行的动画（请参阅文档）。您想要的是，每次调用 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. };
于 2012-05-07T03:35:29.493 回答