Posted By

alyssonweb on 12/15/10


Tagged

display elements jquery Sequentially


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

AllKnightAccess
dtang


Display Elements Sequentially with jQuery


 / Published in: jQuery
 

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-display-elements-sequentially-with-jquery/

  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  

You need to login to post a comment.