Share
I denne videoens hurtige tips demonstrerer jeg en enkel måte å tillate sekvensielle animasjoner av et uendelig antall elementer. Jeg lærte opprinnelig denne teknikken fra Dave Methvin, men tror ikke at mange mennesker er klar over dette ryddige lure.
Vi ønsker å filtrere gjennom et uendelig antall elementer på en side, som passer til noen velg, og deretter få dem til å felle ut sekventielt.
Se
Meg
forsvinne
Accentsconagua
var paras = $ ('p'), i = 0; // Hvis du bruker jQuery 1.4, trenger du ikke å gjøre || []. (funksjon () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) (); Vi begynner med å "cache" alle avsnittene på siden, innpakket i jQuery-objektet (varpar). Vi lager også en iteratorvariabel - Jeg. Denne iteratoren vil tillate oss å målrette mot hvert nytt avsnittelement uten å vite den spesifikke lengden på paras objekt på forhånd.
Innenfor den self-invoking anonym funksjonen får vi første avsnittet på siden med "paras [i]" ... Men vi vil øke Jeg av en for hver iterasjon. På denne måten, neste gang valget kalles, refererer det til det neste elementet i det innpakte settet. Så må vi være sikker på å skrive paras [i ++]. Da er det et enkelt spørsmål om å ringe fadeout, og bestått argumenter.callee som tilbakekallingsfunksjonen, for å tillate rekursjon. Dette vil være lik funksjonen den er inneholdt i; så vi sier egentlig "skyll og gjenta!"
alert (arguments.callee); // varsler følgende (funksjon () $ (paras [i ++] || []). fadeOut ('slow', arguments.callee);) (); Hvis du av en eller annen grunn bruker jQuery 1.3 eller eldre, må du angi hva som skal skje når paras [i] er lik et element som ikke eksisterer. I eldre versjoner av jQuery returnerer det en feil, "undefined." For å kompensere, sender vi $ (paras [i ++] || []) for å angi at hvis elementet ikke eksisterer, pakker vi i stedet et tomt utvalg for å unngå feil.
Det skal bemerkes at fra jQuery 1.4 er dette unødvendig, da jQuery vil returnere jQuery-objektet i stedet.
