Share
In questo video suggerimento rapido, dimostrerò un modo semplice per consentire animazioni sequenziali di un numero infinito di elementi. Originariamente ho imparato questa tecnica da Dave Methvin, ma non penso che molte persone siano consapevoli di questo piccolo trucco.
Vogliamo filtrare attraverso un numero infinito di elementi su una pagina, abbinare alcuni selettori e quindi farli dissolvere sequenzialmente.
Orologio
Me
scomparire
Accentsconagua
var paras = $ ('p'), i = 0; // Se si utilizza jQuery 1.4, non è necessario eseguire || []. (function () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) (); Iniziamo "mettendo in cache" tutti i paragrafi della pagina, racchiusi nell'oggetto jQuery (var paras). Creiamo anche una variabile iteratore - io. Questo iteratore ci permetterà di indirizzare ogni nuovo elemento del paragrafo, senza conoscere la lunghezza specifica del paras oggetto in anticipo.
All'interno della funzione anonima autoinvitante, otteniamo il primo paragrafo sulla pagina con "paras [i]" ... Ma vogliamo incrementare io di uno per ogni iterazione. In questo modo, al prossimo richiamo della selezione, si riferirà all'elemento successivo nel set avvolto. Quindi, dobbiamo essere sicuri di scrivere paras [i ++]. Quindi, si tratta semplicemente di chiamare fadeout e passare arguments.callee come funzione di callback, per consentire la ricorsione. Questo sarà uguale alla funzione in cui è contenuto; quindi stiamo essenzialmente dicendo "risciacqua e ripeti!"
alert (arguments.callee); // avvisa quanto segue (function () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) (); Se, per qualche ragione, stai usando jQuery 1.3 o precedente, devi specificare cosa dovrebbe accadere quando paras [i] è uguale a un elemento che non esiste. Nelle versioni precedenti di jQuery, restituisce un errore "non definito". Per compensare, passiamo $ (paras [i ++] || []) per specificare che, se l'elemento non esiste, avvolgiamo invece una matrice vuota, per evitare errori.
Va notato che, a partire da jQuery 1.4, questo non è necessario, poiché jQuery restituirà l'oggetto jQuery.
