Question

I’m having trouble stopping an animation before it’s done. My code starting at line 24 was intended to allow the user to run the animation again. That works fine, but if the user clicks before the animation is finished it causes problems. I found some similar questions were .stop() method was recomended. I tried including .stop() immediately before the .live in line 24, but that doesn’t seem to work. Could someone please point me in the right direction?

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 stops currently running animation for the selected elements (see docs). What you want is, each time header is called for everything to stop. So just do that.

Try this:

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