Question

I have a list which is hidden using css code {display:none;}

now i am using the jquery code to animate the list (li’s)

var numb = $("ol#update li").length;
 for(j=0; j < numb; j++) {                    
  $("ol#update li").eq(j).animate({
    height: 'show',
opacity: 'show'
}, {duration:1000});
  }

I need to animate the items one after the other

there’s an example in this page

but all the li’s are being animated all at once and i cannot possibly see why.

Answer 1

Just use this instead:

var $li = $("ol#update li");
function animate_li(){
   $li.filter(':first')
      .animate({
         height:  'show',
         opacity: 'show'
      }, 1000, function(){
        animate_li();
      });
  $li = $li.not(':first');
}
animate_li();

Basically it grabs all the lis, and then one by one animates them in. At the same time, each iteration removes the first element from the list. If you wanted it to animate the other way around, replace both occurances of :first with :last.