等待动画完成继续在jQuery之前

Question

有没有办法等待jQuery动画完成之后再继续执行另一个命令？例如，我想淡出/向上滑动元素，更改元素中的某些项目，然后将它们淡入/向下滑动。

如果我一个接一个地发表声明，您可以在动画完成之前看到项目发生更改。

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

谢谢。

Answer 1

您可以在fadeIn/fadeOut中传递回调。 jQuery docs

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

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

Answer 2

将回调函数传递给fadeOut。

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

这是你将在基本的jQuery教程中学到的东西。

Answer 3

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

欲了解更多信息：http://docs.jquery.com/Effects/fadeOut#speedcallback

Answer 4

您可以使用回调方法，它会从.fadeOut叫，像

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

或使用垫层递延对象

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