How to wait for one jquery animation to finish before the next one begins?

Question

I have the following jQuery:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

My issue is that both happen at the same time. I would like the div2 animation to start when the first one finishes. I've tried the method below, but it does the same thing:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
....
function ShowDiv(){
   $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
}

How can I make it wait for the first one to finish?

James Montagne · Accepted Answer · 2012-05-01T17:01:52.393

21

http://api.jquery.com/animate/

animate has a "complete" function. You should place the 2nd animation in the complete function of the first.

EDIT: example http://jsfiddle.net/xgJns/

$("#div1").animate({opacity:.1},1000,function(){
    $("#div2").animate({opacity:.1},1000);    
});

edited May 01 '12 at 17:01

answered May 24 '11 at 20:44

James Montagne

77,516
14
110
130

Isn't that what I am doing in my second example? – Abe Miessler May 24 '11 at 20:44
1

Your 2nd example is close actually. Remove the `()` from the `ShowDiv` in the first line. You are calling the function rather than passing it. – James Montagne May 24 '11 at 20:48
gah! Thanks! How would I pass it a parameter if I needed to? – Abe Miessler May 24 '11 at 20:51
simply remove the `()` and it works, functions can be passed around like any other variable, just don't add `()` which will call the function instead and pass the return value. – James Montagne May 24 '11 at 20:53
What I was asking, is if it is possible to pass a Parameter to ShowDiv – Abe Miessler May 24 '11 at 21:23
1

oh, yes, you would just have to wrap it in a function so `function(){ShowDiv('something')}` would be the third parameter to animage. – James Montagne May 24 '11 at 22:27

score 2 · Answer 2 · answered May 24 '11 at 20:55

$(function(){
    $("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){
    $("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000);
    });
});

http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/

score 1 · Answer 3 · answered May 24 '11 at 20:44

You can pass a function as parameter to the animate(..) function which is called after the animation completes. Like so:

$('#div1').animate({
    width: 160
}, 200, function() {
    // Handle completion of this animation
});

The example below is a clearer explanation of the parameters.

var options = { },
    duration = 200,
    handler = function() {
        alert('Done animating');
    };

$('#id-of-element').animate(options, duration, handler);

score 1 · Answer 4 · edited May 24 '11 at 20:51

1

Don't use a timeout, use the complete callback.

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){

  $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

});

edited May 24 '11 at 20:51

James Montagne

77,516
14
110
130

answered May 24 '11 at 20:50

Patrick

11
1

score 1 · Answer 5 · answered May 24 '11 at 20:51

Following what kingjiv said, you should use the complete callback to chain these animations. You almost have it in your second example, except you're executing your ShowDiv callback immediately by following it with parentheses. Set it to ShowDiv instead of ShowDiv() and it should work.

mcgrailm's response (posted as I was writing this) is effectively the same thing, only using an anonymous function for the callback.

score 0 · Answer 6 · answered May 24 '11 at 20:56

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function () {
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); });

This works for me. I'm not sure why your original code doesn't work. Maybe it needs to be incased in an anonymous function?

How to wait for one jquery animation to finish before the next one begins?

6 Answers6

Linked

Related