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

Question

我想知道是否有办法在fadeIn开始之前等待fadeOut完成，因为当我运行以下代码时，它会将一个div放在另一个下面，然后当它淡出时它才会上移...看起来有点丑陋。

代码如下:

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

- BigJobbies

Answer 1

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

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

- mu is too short

---

请记住，如果您的选择器过于笼统，当元素完全淡出时，完成函数将为每个元素触发，因此如果有一些已经隐藏，它将立即触发。 - box86rowh

我已经使用了 ":visible" 选择器来解决 @box86rowh 描述的问题。请参考：http://api.jquery.com/visible-selector/ - Pim Schaaf

Answer 2

另一个选项是使用Promise，它将等待.sidebarform上的所有挂起的动画完成，即使它们是在其他地方启动的:

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

- kravits88

---

尽管其他答案已经被勾选为正确答案，但我认为这个答案更具体地解决了我的问题。 - Lewis Menelaws

为了帮助新用户理解这里的区别，如果有X个具有sidebarform类的元素，在被接受的答案中，回调函数将针对每个元素进行调用。例如，如果您在回调中有console.log('HERE');，则会在控制台中看到HERE X次。Promise告诉jQuery在与附加函数（fadeOut）相关的一段时间内执行某些操作，并且done()告诉它承诺在完全完成（已完成，呆）时运行。通过这种方式，您可以拥有一个淡出cb来更改innerhtml，以及一个完成cb来警报控制台。 - Clayton Engle

这解决了我的问题，因为由于已经隐藏的元素，淡出回调立即执行。该方法似乎总是等待，这正是我想要的。 - Daniel Black

Answer 3

我正在使用jQuery的队列 - 允许您将任何内容放入fx堆栈中（取消也可以与之一起使用，无需使用最终的.promise()）：

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

如果没有使用其他效果，可以删除done()。 .queue()将保持堆栈，直到调用done() - 用于异步执行很有用。它不会等待fadeIn。

这将强制fx堆栈等待fadeIn（只是额外的示例）：

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

队列只有在淡入完成并将done作为回调函数调用时才会继续 - 这是队列的一个回调函数。堆栈将其视为一个条目。

- BananaAcid