Sfat rapid Animații simple secvențiale în jQuery

În acest sfat rapid, voi demonstra o modalitate ușoară de a permite animații secvențiale ale unui număr infinit de elemente. Am învățat inițial această tehnică de la Dave Methvin, dar nu cred că mulți oameni sunt conștienți de acest truc mic.

Abonați-vă la canalul YouTube pentru a viziona toate tutorialele video!

Scopul

Vrem să filtram printr-un număr infinit de elemente pe o pagină, să potrivim un selector și apoi să-i facem să se estompeze secvențial.

HTML-ul

 
Ceas
 
Pe mine
 
Dispărea
 

JQuery

var paras = $ ('p'), i = 0; // Dacă folosiți jQuery 1.4, nu trebuie să faceți || []. (funcția () $ (paras [i ++] || []) fadeOut ('slow', arguments.callee);) ();

Începem prin "cache" toate paragrafele de pe pagină, înfășurate în obiectul jQuery (var paras). De asemenea, creăm o variabilă iterator - eu. Acest iterator ne va permite să vizăm fiecare element al noului paragraf, fără a cunoaște lungimea specifică a lui punctele obiect înainte de timp.

În cadrul funcției anonime care invocă automat, primim primul paragraf pe pagină cu "paras [i]" ... Dar vrem să creștem eu cu câte una pentru fiecare iterație. În acest fel, data viitoare când selecția va fi apelată, se va face trimitere la următorul element din setul înfășurat. Deci, trebuie să fim siguri să scriem punctele [i ++]. Apoi, este o chestiune simplă de a apela fadeout, și treci arguments.callee ca funcția callback, pentru a permite recursivitatea. Aceasta va fi egală cu funcția în care este conținută; așa că în esență spunem "clătiți și repetați!"

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

Notă

Dacă, din anumite motive, utilizați jQuery 1.3 sau mai mult, trebuie să specificați ce ar trebui să se întâmple atunci când paras [i] este egal cu un element care nu există. În versiunile mai vechi ale jQuery, aceasta returnează o eroare, "undefined". Pentru a compensa, trecem $ (paras [i ++] || []) pentru a specifica că, dacă elementul nu există, înfășurăm o matrice goală, pentru a evita orice eroare.

Trebuie remarcat faptul că, începând cu jQuery 1.4, acest lucru nu este necesar, deoarece jQuery va returna obiectul jQuery.

• Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.