Pause between animations
<p>I have a bunch of &lt; li > elements which I want to animate one after the other, so what I'm doing is the following:</p>

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

<p>The animateAll() function goes like this</p>

<pre><code>function animateAll(){
  i++;
  if(i&lt;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());
}
</code></pre>

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