等待动画完成，然后继续使用jQuery

Question

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

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 completes.

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

Thanks.

Answer 1

You can pass callback in fadeIn/fadeOut . jQuery docs

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

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

Answer 2

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

Answer 3

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.

Answer 4

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

有关更多信息： http : //docs.jquery.com/Effects/fadeOut#speedcallback