Snelle tip eenvoudige sequentiële animaties in jQuery

In deze korte video tip laat ik een eenvoudige manier zien om opeenvolgende animaties toe te staan ​​van een oneindig aantal elementen. Ik heb deze techniek oorspronkelijk van Dave Methvin geleerd, maar denk niet dat veel mensen zich bewust zijn van dit handige trucje.

Abonneer je op ons YouTube-kanaal om alle videozelfstudies te bekijken!

Het doel

We willen filteren door een oneindig aantal elementen op een pagina, een bepaalde selector aanpassen en ze daarna sequentieel laten vervagen.

De HTML

 
Kijk maar
 
Me
 
Verdwijnen
 

De jQuery

var paras = $ ('p'), i = 0; // Als u jQuery 1.4 gebruikt, hoeft u niet te doen || []. (function () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) ();

We beginnen met het "cachen" van alle paragrafen op de pagina, ingepakt in het jQuery-object (var paras). We maken ook een iteratorvariabele - ik. Met deze iterator kunnen we elk nieuw alinea-element targeten, zonder de specifieke lengte van de alinea te kennen punten object van tevoren.

Binnen de zelfoproepende anonieme functie, krijgen we de eerste alinea op de pagina met "paras [i]" ... Maar we willen verhogen ik met één voor elke iteratie. Op deze manier wordt de volgende keer dat de selectie wordt aangeroepen, deze verwezen naar het volgende element in de ingepakte set. We moeten dus zeker schrijven punten [i ++]. Dan is het een kwestie van fadeout aanroepen, en argumenten.callee doorgeven als de callback-functie, om recursie mogelijk te maken. Dit is gelijk aan de functie die het bevat; dus we zeggen in feite "naspoelen en herhalen!"

alert (arguments.callee); // waarschuwt het volgende (function () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) ();

Notitie

Als je om wat voor reden dan ook jQuery 1.3 of ouder gebruikt, moet je specificeren wat er zou moeten gebeuren als paras [i] gelijk is aan een element dat niet bestaat. In oudere versies van jQuery wordt een fout geretourneerd, "undefined." Om dit te compenseren, geven we $ (para [i ++] door || []) om aan te geven dat, als het element niet bestaat, we in plaats daarvan een lege array omwikkelen om fouten te voorkomen.

Opgemerkt moet worden dat dit vanaf jQuery 1.4 onnodig is, omdat jQuery het jQuery-object in plaats daarvan zal retourneren.

• Volg ons op Twitter of abonneer je op de Nettuts + RSS Feed voor de beste tutorials voor webontwikkeling op internet.