Snabbtips Enkel sekventiell animering i jQuery

I den här snabba snabbspetsen visar jag ett enkelt sätt att tillåta sekventiella animeringar av ett oändligt antal element. Jag lärde mig ursprungligen denna teknik från Dave Methvin, men tror inte att många människor är medvetna om detta snygga lilla trick.



Prenumerera på vår YouTube-kanal för att titta på alla videohandledning!

Målet

Vi vill filtrera genom ett oändligt antal element på en sida, matcha någon väljare och sedan få dem att sekventiellt blekna ut.

HTML

 

Kolla på

Mig

Försvinna

JQuery

varpar = $ ('p'), i = 0; // Om du använder jQuery 1.4 behöver du inte göra || []. (funktion () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) ();

Vi börjar med att "cache" alla punkter på sidan, inslagna i jQuery-objektet (var paras). Vi skapar också en iteratorvariabel - jag. Denna iterator tillåter oss att rikta in sig på varje nytt styckeelement utan att känna till den specifika längden på punkterna föremål före tid.

Inom den egna anropande anonyma funktionen får vi första stycket på sidan med "paras [i]" ... Men vi vill öka jag av en för varje iteration. På så sätt hänvisas nästa gång valet heter till det nästa elementet i den förpackade uppsättningen. Så måste vi vara säkra på att skriva punkterna [i ++]. Då är det enkelt att ringa fadeout och passera argument.callee som återuppringningsfunktionen, för att möjliggöra rekursion. Detta kommer att vara lika med den funktion det finns i; så vi säger väsentligen "skölj och upprepa!"

alert (arguments.callee); // varnar följande (funktion () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) ();

Notera

Om du använder jQuery 1.3 eller äldre, måste du ange vad som ska hända när paras [i] är lika med ett element som inte existerar. I äldre versioner av jQuery returnerar det ett fel, "odefinierad". För att kompensera skickar vi $ (paras [i ++] || []) för att ange att om elementet inte existerar, lägger vi istället en tom array för att undvika fel.

Det bör noteras att från jQuery 1.4 är detta onödigt, eftersom jQuery kommer att returnera jQuery-objektet istället.

  • Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för de bästa webbutvecklingsstudierna på webben.