Failed to bind animation in jquery

Question

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

now i am using 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 elements one by one

there is an example in this page

but is it all animated all at once, and I can’t understand 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();

It basically captures all lis and then animates them one by one. At the same time, each iteration removes the first item from the list. If you want it to animate the other way around, replace both events :firstwith :last.