Question

我已经看过并看到过对这类问题的一些回应，但仍然无法绕过它。我有一个功能，在不同的时间完成5个不同的动画。我希望这个功能完全完成它的内部功能＆＃39;下一个函数开始之前的动画。

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的文档。在那里，您将看到它可以具有CacheManager属性。让我们看看这个例子是否对您有所帮助：

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);时增加此数字，并在完成此类事件时减少该数字。我们在调用回调之前减少它，并且回调检查该值。如果为0，则调用回调。

等待函数中的所有淡入淡出在下一个函数启动之前完成

1 个答案: