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?

回答1:

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

回答2:

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

回答3:

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

回答4:

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.

回答5:

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

});

回答6:

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

来源：https://stackoverflow.com/questions/6116597/how-to-wait-for-one-jquery-animation-to-finish-before-the-next-one-begins

标签

javascript

jquery

animation

callback

sequential