WEBDESIGN

jQuery Animations Queue | Animation hört nicht auf!

Wer bereits mit jQuery Animationen gearbeitet hat, hat vielleicht schon festgestellt, dass eine Animation nicht aufhört, sobald eine neue Animation auf dasselbe Element ausgeführt wird. Dieser Effekt ist kein Bug, trotzdem wir er von vielen als nervend empfunden. In diesem Artikel schauen wir uns an, wie jQuery Animationen abarbeitet und wie man Animationen abbrechen kann.

Mit jQuery kann jeder, der sich ein bisschen in die Materie einarbeitet, HTML Elemente animieren. Viele Entwickler wissen jedoch nicht, wie jQuery intern solche Animationsevents ablegt. Werden dann Animationen an mouseevents, wie zum Beispiel einen Klick gebunden, kann es schnell zu unerwarteten Ergebnissen kommen. Bei jedem Klick wird die Animation einer internen Warteschlange hinzugefügt.

Was nun passieren kann ist, dass wenn ein Benutzer 10mal hintereinander auf den Auslöser der Animation klickt, 10 Animationen der Warteschlange hinzugefügt werden. Dies hat zur Folge, dass die Animation auch 10mal hintereinander ausgeführt wird und solange weiterläuft bis die Warteschlange leer ist.

Ein weiteres, praxisnahes Beispiel sind mouseover und mouseout Events, betrachten wir dazu folgenden Code (unter dem Reiter Result, kann das fertige Beispiel getestet werden.):

Wenn man schnell mit der Maus ein paar mal hintereinander über das Element fährt, sieht man direkt, dass die Animation nicht aufhört und wirklich alle nacheinander ausgeführt werden.

Um dieses Problem zu beheben gibt es die Methode stop(). Die Anwendung ist sehr einfach, die Methode muss nur aufgerufen werden, bevor die Animation startet.

An diesem Beispiel sieht man, dass die Warteschlange bei jedem Eintritt des Events gelöscht wird.

Die Methode stop() akzeptiert 2 Parameter. Der erste Parameter kann entweder true oder false sein, wird er auf true gesetzt, dann wird die Animation Queue(=Warteschlange) geleert.

Der zweite Parameter kann ebenfalls true oder false sein. Bei true wird dafür gesorgt, dass wenn eine Animation gerade im Gang ist, diese sofort auf den fertigen Status gesetzt wird. Wenn ein Element also gerade von links nach rechts geslidet wird, wird das Element sofort rechts platziert.

Weitere Informationen findet man auf der offiziellen Webseite von jQuery.



Kommentare ( 1 Kommentar )

  • Stefan Antworten ↓

    Hatte das auch bei den "hover"-effekt auf den Beiträgen gemerkt. Fand das aber recht witzig. Mittlerweile hast du's ja gefixt ;)

Schreib einen Kommentar