Warten, bis alle Fades in einer Funktion beendet sind, bevor die nächste Funktion gestartet wird

Question

Ich habe einige Antworten auf diese Art von Problem gesucht und gesehen, kann mich aber immer noch nicht damit befassen. Ich habe eine Funktion mit 5 verschiedenen Animationen, die zu verschiedenen Zeiten enden. Ich möchte, dass diese Funktion die Animationen der inneren Funktionen vollständig beendet, bevor die nächste Funktion startet.

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

einen Blick auf jQuery Dokumentation Nehmen Sie etwa fadeout. Dort werden Sie sehen, dass es eine complete Eigenschaft haben kann. Mal sehen, ob dieses Beispiel hilft Ihnen:

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); 

Hier haben wir einen Zähler zu wissen, wie viele fadeouts warten wir noch. Wir erhöhen diese Nummer, wenn ein fadeOut aufgerufen wird und verringern, wenn ein solches Ereignis abgeschlossen ist. Wir verringern es vor dem Aufruf des Callbacks und der Callback überprüft diesen Wert. Wenn es 0 ist, wird der Rückruf aufgerufen.