jQuery fügt der Animationswarteschlange Funktionen hinzu

9

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>

Nehmen Sie diese Demo zum Beispiel

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.

Diese DEMO sollte alarmieren ( 'took around 9 seconds to complete')

    
qwertymk 03.06.2012, 18:21
quelle

7 Antworten

9

Verwenden Sie .queue() für ein gemeinsames jQuery-Objekt:

%Vor%

Demo

    
Jeffery To 12.06.2012, 18:14
quelle
3

Verwenden Sie .promise () , um Rückrufe bei show und hide :

zu umgehen
  

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%     
Ed I 14.06.2012 08:54
quelle
2

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%     
Sergei Zahharenko 12.06.2012 13:18
quelle
1

Ich würde die Funktion animate() verwenden, da sie mit einer vollständigen Funktion geliefert wird, die aufgerufen wird, wenn die Animation Ссылка beendet hat.

So verwenden Sie das jQuery-Dokumentbeispiel:

%Vor%

Ich denke, das ist der sauberste Weg ...

    
Uwe 18.06.2012 22:38
quelle
0

Sie könnten so etwas tun:

%Vor%

Ich schreibe nicht den ganzen Code für dich, aber das sollte dir eine gute Vorstellung davon geben, wie es geht. Auf die Variablen oder Funktionen kann auch nicht vom globalen Bereich oder von anderen zugegriffen werden.

    
Luka 12.06.2012 12:39
quelle
-1

Fügen Sie stop () vor der Animation hinzu:

%Vor%     
nathancahill 03.06.2012 18:25
quelle
-2

Verwenden Sie dies $(element).promise().done(function () {...})

In Ihrem Fall

%Vor%

Die nächste Animation wird nur ausgeführt, wenn die vorherige Animation des ausgewählten Elements abgeschlossen ist.

    
Piyush 03.06.2012 19:01
quelle

Tags und Links