Is there anyway to wait for a jQuery animation to finish before proceeding with another mand?

For example, I want to fade out/slide up an element, change some items within the element and then fade them back in/slide back down.

If I put the statements one after another, you can see the items change before the animation pletes.

$('#item').fadeOut();
$('#item').html('Changed item');
$('#item').fadeIn();

Thanks.

Is there anyway to wait for a jQuery animation to finish before proceeding with another mand?

For example, I want to fade out/slide up an element, change some items within the element and then fade them back in/slide back down.

If I put the statements one after another, you can see the items change before the animation pletes.

$('#item').fadeOut();
$('#item').html('Changed item');
$('#item').fadeIn();

Thanks.

• javascript
• jquery

4 Answers 4

You can pass callback in fadeIn/fadeOut. jQuery docs

$('#item').fadeOut('slow', function(){

     $('#item').html('Changed item');
     $('#item').fadeIn();
});

You can either use the callback method which gets called from .fadeOut, like

$('#item').fadeOut('fast', function() {
    $(this).html('Changed item').fadeIn();
});

or use the underlaying Deferred object

$('#item').fadeOut('slow').promise().done(function() {
    $(this).html('Changed item').fadeIn();
});

Pass a callback function to fadeOut.

$("#item").fadeOut(function() { 
                       $(this).html("changed").fadeIn();
                   });

This is the sort of thing you'll learn in a basic jQuery tutorial.

$('#item').fadeOut('slow', function() { // do your stuff here });

For more info: http://docs.jquery./Effects/fadeOut#speedcallback