Schneller Tipp Einfache sequenzielle Animationen in jQuery

In diesem Video-Schnelltipp zeige ich Ihnen einen einfachen Weg, um Animationen mit einer unendlichen Anzahl von Elementen zu ermöglichen. Ich habe diese Technik ursprünglich von Dave Methvin gelernt, glaube aber nicht, dass viele Leute diesen kleinen Trick kennen.

Abonniere unseren YouTube-Kanal, um alle Video-Tutorials anzusehen!

Das Ziel

Wir möchten eine unendliche Anzahl von Elementen auf einer Seite filtern, die mit einem Selektor übereinstimmen, und diese dann sequentiell ausblenden.

Das HTML

 
Sehen
 
Mir
 
Verschwinden
 

Die jQuery

var paras = $ ('p'), i = 0; // Wenn Sie jQuery 1.4 verwenden, müssen Sie || nicht tun []. (function () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) ();

Wir beginnen mit dem "Caching" aller Absätze auf der Seite, die in das jQuery-Objekt (var paras) eingeschlossen sind. Wir erstellen auch eine Iteratorvariable - ich. Mit diesem Iterator können wir jedes neue Absatzelement anvisieren, ohne die genaue Länge des zu kennen Paras Objekt vor der Zeit.

Innerhalb der anonymen Funktion mit Selbstaufruf erhalten wir den ersten Absatz auf der Seite mit "paras [i]" ... Aber wir möchten inkrementieren ich für jede Iteration um eins. Auf diese Weise bezieht sich die Auswahl beim nächsten Aufruf der Auswahl auf das nächste Element in der umschlossenen Gruppe. Wir müssen also unbedingt schreiben paras [i ++]. Dann müssen Sie einfach fadeout aufrufen und arguments.callee als Rückruffunktion übergeben, um eine Rekursion zu ermöglichen. Dies entspricht der Funktion, in der es enthalten ist. also sagen wir im Wesentlichen "spülen und wiederholen!"

alert (argumente.callee); // warnt die folgenden (function () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) ();

Hinweis

Wenn Sie aus irgendeinem Grund jQuery 1.3 oder älter verwenden, müssen Sie angeben, was passieren soll, wenn paras [i] einem nicht vorhandenen Element entspricht. In älteren Versionen von jQuery wird der Fehler "undefined" zurückgegeben. Zum Ausgleich übergeben wir $ (paras [i ++] || []) um anzugeben, dass, wenn das Element nicht vorhanden ist, ein leeres Array umbrochen wird, um Fehler zu vermeiden.

Es ist zu beachten, dass dies ab jQuery 1.4 nicht erforderlich ist, da jQuery stattdessen das jQuery-Objekt zurückgibt.

• Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts + RSS-Feed für die besten Webentwicklungs-Tutorials im Web.