Question

I have a bunch of < li > elements which I want to animate one after the other, so what I’m doing is the following:

<script type="text/javascript">
var i=-1;
var items = $('li');
animateAll();

The animateAll() function goes like this

function animateAll(){
  i++;
  if(i<items.length){
   var cual=items[i];
   $(cual).css("position", "absolute");
   var xPos=0;//to set the horizontal position
   var yPos=0;//vertical position
   var xInicial=$('#rec_int').position().left;//initial x position
   var xFinal=xInicial+$('#rec_int').innerWidth();
   var yInicial=$('#rec_int').position().top;
   var yFinal=yInicial+$('#rec_int').innerHeight();
   xPos=randomXToY(xInicial,xFinal);
   yPos=randomXToY(yInicial,yFinal);
   $(cual).css("top",xPos).css("left", yPos);
   $(cual).delay(1000).animate({
   left: parseInt($(cual).css('left'),10) == 0 ?    -$(cual).outerWidth() :0,
   top: parseInt($(cual).css('top'),10) == 0 ? -$(cual).outerHeight() : 0
   },1000,animateAll());
}

The problem is that all the < li > are being animated after a 1 second delayed, all at the same time. What I want to achieve, is first move the first “< li >” then the second and so on.
Hope someone can help

Answer 1

You need to change the delay, since you are delaying each one by 1 second, they will all animate at the same time.

There are many ways to solve this.

1. The easiest way given the setup you have, is to use $(cual).delay(1000*i).animate({...
2. The better solution, in my opinion, is to use a callback to issue the next animation. Then you wouldn’t even have a delay. Instead, the next animation would be triggered as soon as the one before it finished.
3. You could try using jquery queue() on the ul/ol parent.