CODEWITHSUNDEEP
jqueryjquery-animate
user1028866
user1028866

Reputation: 795

Stopping an animation before it's done to restart it

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>

Upvotes: 1

Views: 118

Answers (2)

mrtsherman
mrtsherman

Reputation: 39902

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

Upvotes: 2

robrich
robrich

Reputation: 13205

.stop() is the way to do it. Try moving it inside the function -- e.g. after line 24 and before line 25. Putting it before .live() stops it as you wire up the function. Putting it inside the function stops it as you're about to fire up the new animation.

Or looking at it again, perhaps place it just before each .animate() on line 7, 12, and 17.

Upvotes: 2

Related Questions