Question

I m un-animating a list using this code…

function unanimate_li() {
  $li.filter(':last')
    .animate({
      height:  'hide',
      opacity: 'hide'
    }, 1000, function() {
      unanimate_li();
    });
  $li = $li.not(':last');
}

I have set up the li using this code

$li = $("ol#update > li");
$li = $li.filter(':gt(4)').filter(':lt('+ size + ')');

Now when i try to do this i cannot get the 5th li(4th on zero based) to remove
It removes the sixth li
The example here

And when the second time i do the update it goes on to infinite loop

I cannot understand why

Answer 1

I’m not quite sure what you are trying to do here. When you call either the animate or the unanimate function your callback calls the same function again and seems like it should create an infinite loop.

Also, I noticed your unanimate function uses $li that is updated multiple times in the script. This became very confusing to me as to what it ultimately contained. So I modified the function to grab the current li tags and work from there.

Another thing I noticed is that you are using :last to find the last li which I believe is also grabbing the hidden li‘s, so either remove the hidden ones or use :visible

Try these functions:

function animate_li(){
 $("ol#update > li:first")
  .animate({
   height:  'show',
   opacity: 'show'
  }, 5
 );
}

function unanimate_li(){
 $("ol#update > li:visible:last")
  .animate({
   height:  'hide',
   opacity: 'hide'
  }, 1000, function(){
   // $(this).remove(); // uncomment this line if you want to remove the li
  });
}