Advanced Search

Display Elements Sequentially with jQuery

/ Published in: jQuery
Save to your folder(s)
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-display-elements-sequentially-with-jquery/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // Wrapping, self invoking function prevents globals
  2. (function() {
  3.    // Hide the elements initially
  4.    var lis = $('li').hide();
  5.  
  6.    // When some anchor tag is clicked. (Being super generic here)
  7.    $('a').click(function() {
  8.       var i = 0;
  9.  
  10.       // FadeIn each list item over 200 ms, and,
  11.       // when finished, recursively call displayImages.
  12.       // When eq(i) refers to an element that does not exist,
  13.       // jQuery will return an empty object, and not continue
  14.       // to fadeIn.
  15.       (function displayImages() {
  16.          lis.eq(i++).fadeIn(200, displayImages);
  17.       })();
  18.    });
  19. })();

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.