Snabbtips Displayelement Sekvensiellt med jQuery

I den här snabba tipsen får jag lära dig hur du lägger till lite känsla på din sida, genom att visa en uppsättning element i följd. Medan det finns många sätt att uppnå denna uppgift, kommer vi idag att granska en teknik som använder rekursiva funktioner.


Prenumerera på vår YouTube-sida för att titta på alla videohandledning!
 // Wrapping, self invoking funktion förhindrar globals (function () // Dölj elementen initialt var lis = $ ('li'). Hide (); // När någon ankerkod klickas. (Är super generisk här) $ ('a'). klicka (funktion () var i = 0; // FadeIn varje listobjekt över 200 ms, och // när det är färdigt, kallas rekursivt displayImages. // När eq (i) refererar till ett element som existerar inte, // jQuery returnerar ett tomt objekt och fortsätter inte // till fadeIn. (funktion displayImages () lis.eq (i ++). fadeIn (200, displayImages);) ();); ) ();

Slutsats

Vad som gör den här användningen effektiv är det faktum att när lis.eq (i) hänvisar till ett element som inte existerar i den förpackade uppsättningen, kommer ett tomt jQuery-objekt att returneras. När detta händer är de efterföljande metoderna i kedjan (FadeIn) kommer aldrig att ringas.