Das Problem ist, dass wenn ich versuche, mehrere Animationen zu machen, alle gleichzeitig passieren.
Gibt es eine Möglichkeit, Animationen nacheinander zu verwenden, ohne Rückrufe zu verwenden?
Folgendes möchte ich tun:
%Vor% Wenn Sie auf #a1
und dann auf #a2
und dann auf #a3
klicken, bevor die erste Animation abgeschlossen ist, sollte sie nicht sofort starten, sondern warten, bis die Animationswarteschlange leer ist, und dann die nächste starten / p>
Ich möchte in der Lage sein, a1
dann a2
dann a3
eins nach dem anderen zu klicken und es zuerst das erste div vollständig auszublenden, dann das zweite vollständig und dann das dritte.
Mein Beispiel ist übermäßig einfach und während dies mit Callbacks gemacht werden kann, kann mein echtes Problem nicht so Callbacks sind keine Option.
Wenn Sie im Wesentlichen alle drei anklicken, sollte die Animation in 9 Sekunden abgeschlossen sein.
'took around 9 seconds to complete')
Verwenden Sie .promise () , um Rückrufe bei show
und hide
:
Die Methode .promise () gibt eine dynamisch generierte Promise zurück, die aufgelöst wird, sobald alle Aktionen eines bestimmten Typs, der an die Sammlung gebunden ist, in die Warteschlange gestellt wurde oder nicht, beendet wurden.
Geben Sie standardmäßig "fx" ein, was bedeutet, dass das zurückgegebene Versprechen aufgelöst wird, wenn alle Animationen der ausgewählten Elemente abgeschlossen sind
Verwenden Sie .queue () , um die Anzahl der aufgelösten Animationen pro Versprechen zu begrenzen (siehe auch jsFiddle ):
%Vor%Versuchen Sie, ein Array mit der Warteschlange zu erstellen, und prüfen Sie, ob etwas darin enthalten ist, als Rückruf für die Animation, und führen Sie es erneut aus, falls vorhanden. Ich habe mit deinem Beispiel ein wenig gespielt.
schau es dir an:
%Vor%Tags und Links javascript jquery