jquery - 等待函数中的所有淡入淡出完成后，才会开始下一个函数

Question

我已经看过并看到了对此类问题的一些回应，但仍然无法解决这个问题。我有一个函数，有 5 个不同的动画在不同时间完成。我希望这个函数在下一个函数开始之前完全完成其内部函数的动画。

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>

CSS

#div1 {
  background-color:red;
  width:100px;
  height:100px;
}
#div2 {
  background-color:blue;
  width:100px;
  height:100px;
}
#div3 {
  background-color:green;
  width:100px;
  height:100px;
}
#div4 {
  background-color:yellow;
  width:100px;
  height:100px;
}
#div5 {
  background-color:orange;
  width:100px;
  height:100px;
}
#div6 {
  background-color:black;
  width:100px;
  height:100px;
  display:none;
}

JQuery/JS

fadeAll(); // I want to wait for all of the fadeOuts in this function to complete before...
$('#div6').fadeIn(); // .. this function starts.

function fadeAll() {
  $('#div1').fadeOut('slow');
  $('#div2').fadeOut('fast');
  $('#div3').fadeOut();
  $('#div4').fadeOut('fast');
  $('#div5').fadeOut();  
}

Answer 1

查看 jQuery 关于 fadeout 的文档。在那里您将看到它可以具有 complete 属性。让我们看看这个例子是否对您有帮助:

var fades = 0;

function fadeOut(context, duration, callback) {
    fades++;
    context.fadeOut(duration, function() {
        fades--;
        if (typeof callback === "function") {
            callback();
        }
    });
}

function fadeAll(callback) {
  fadeOut($("#div1"), 'slow', callback);
  fadeOut($("#div2"), 'fast', callback);
  fadeOut($("#div3"), undefined, callback);
  fadeOut($("#div4"), 'fast', callback);
  fadeOut($("#div5"), undefined, callback);  
}

function fadeCallback() {
    if (fades === 0) {
        $('#div6').fadeIn();
    }
}

fadeAll(fadeCallback);

这里我们有一个计数器来知道我们正在等待多少次淡出。当调用 fadeOut 时，我们会增加此数字，并在此类事件完成时减少此数字。我们在调用回调之前减少它，并且回调会检查该值。如果为0，则调用回调。