javascript - 等待动画完成，然后在 jQuery 中继续

Question

无论如何要等待 jQuery 动画完成，然后再继续执行另一个命令？

例如，我想淡出/向上滑动一个元素，更改元素内的一些项目，然后将它们淡入/向下滑动。

如果我将语句一个接一个地放置，您可以在动画完成之前看到项目发生变化。

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

谢谢。

score 3 · Accepted Answer

您可以在fadeIn/fadeOut. jQuery 文档

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

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

score 3 · Accepted Answer

您可以使用从中调用的回调.fadeOut方法，例如

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

或使用底层Deferred 对象

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

score 1 · Accepted Answer

将回调函数传递给fadeOut.

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

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

score 1 · Accepted Answer

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

4 回答 4