jQuery - 在运行fadeIn之前等待fadeOut完成

Question

我想知道在fadeIn开始之前是否有任何方式等待fadeOut完成，就像我运行下面的代码一样，它将一个div放在另一个下面，然后当它淡出时它向上移动......看起来有点难看。

代码如下：

$('.sidebarform').fadeOut('slow');
$('.sidebarsuccess').fadeIn('slow');

Answer 1

fadeOut函数有一个在动画完成时执行的回调：

$('.sidebarform').fadeOut('slow', function() {
    $('.sidebarsuccess').fadeIn('slow');
});

Answer 2

另一种选择是使用promise，等待.sidebarform上的所有待处理动画首先完成，即使它们是在其他地方启动的：

$('.sidebarform').fadeOut('slow').promise().done(function() {
    $('.sidebarsuccess').fadeIn('slow');
});

Answer 3

我正在使用jQuery的Queues-允许您将任何内容放入fx堆栈中（并取消它的工作）：

$('.sidebarform').fadeOut('slow').queue(function(done) {
    $('.sidebarsuccess').fadeIn('slow');
    done();
}) .... other chained effects

如果不使用其他效果，则可以删除done()。 .queue()将保留堆栈，直到调用done()为止-对异步执行很有用。