Animiere die Div, nachdem die vorherige Div-Animation mit deferred object abgeschlossen wurde. Diese einfache Methode funktioniert mit den beiden Funktionen f1 und f2 , aber wenn ich f3 einführe, schlägt es fehl.
Gibt es eine bessere Möglichkeit, dies mit dem verzögerten Objekt zu erreichen?
JSFiddle: Ссылка
Sie werden es einfacher finden:
animationAgent() zu einer einfachen Funktion, die das Versprechen zurückgibt, die nur über das animierte Element informiert, und nichts über die Reihenfolge, in der es verwendet werden soll (dh% prevElement auslassen), f1() , f2() und f3() , um die von animationAgent() . Dann haben Sie die Grundlage für den Aufbau einer zuverlässigen Animationssequenz.
%Vor%Alternativ konstruieren Sie die .then-Kette mechanistisch aus einem Array von Funktionsreferenzen:
%Vor% Da die drei Animationen identisch sind, können Sie die Notwendigkeit für einzelne Funktionen vermeiden, indem Sie die .then-Kette aus einem Array von Elementselektoren erstellen und animationAgent() direkt aufrufen:
Haben Sie jemals darüber nachgedacht, Callbacks in der Animationsfunktion zu verwenden?
Hier ist ein Beispiel mit fadeOut: Ссылка
%Vor%nicht sicher, aber ich denke, das ist was du willst.
Arbeitsbeispiel Geige
Ich denke, Sie hoffen, dass deferred.done() f1, f2, f3 nacheinander ausführt, und das tut es auch. Es wartet jedoch nicht darauf, dass die in diesen Funktionen aufgerufenen Animationen beendet werden, bevor die nächste Funktion aufgerufen wird.
Versuchen Sie, die Funktionsaufrufe an der Konsole mit console.log() zu protokollieren, und Sie werden es wissen.
Hier ist der aktualisierte JavaScript-Code -
%Vor%Tags und Links javascript jquery jquery-deferred deferred