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/


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.