CODEWITHSUNDEEP
javascriptjqueryanimationcallbacksequential
Abe Miessler
Abe Miessler

Reputation: 85056

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

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?

Upvotes: 12

Views: 26993

Answers (6)

James Montagne
James Montagne

Reputation: 78650

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);    
});​

Upvotes: 21

Brian Field
Brian Field

Reputation: 1

$("#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?

Upvotes: 0

Joaquin
Joaquin

Reputation: 21

$(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/

Upvotes: 2

Patrick
Patrick

Reputation: 11

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);

});

Upvotes: 1

Tomthepythonist
Tomthepythonist

Reputation: 81

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.

Upvotes: 1

Kevin
Kevin

Reputation: 5694

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);

Upvotes: 1

Related Questions