Пауза между анимацией

Question

у меня есть куча < li> элементы, которые я хочу, чтобы анимировать один за другим, так что я делаю это следующее:

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

Функция animateAll() выглядит следующим образом

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()); 
} 

проблема заключается в том, что все < литий> являются анимируемого после того, как 1 секунду с задержкой, все в то же самое время. То, что я хочу достичь, сначала перенесите первый «< li>», затем второй и так далее. Надеюсь, кто-то может помочь

Answer 1

Вы должны изменить задержку, так как вы задерживая каждый один на 1 секунду, все они будут оживлять в то же самое время.

Существует много способов решить эту проблему.

1. Самый простой способ, учитывая настройки у вас есть, чтобы использовать $(cual).delay(1000*i).animate({...
2. лучше решение, на мой взгляд, является использование обратного вызова для выдачи следующей анимации. Тогда у вас даже не будет задержки. Вместо этого следующая анимация будет запущена, как только она закончится.
3. Вы можете попробовать использовать jquery queue() для родителя ul/ol.

Answer 2

Его, потому что вы также захватываете все предметы. Я предлагаю вам начать с первой Li с помощью этого:

var start = $('li:first-element'); 

Второй шаг, чтобы сделать вашу функцию рекурсивного так, что она повторяется, пока все братья и сестры в списке не обрабатываются. Функция останавливается, когда он достигает последнего один

var start = $('li:first-element'); 
var currentSibling = start; 

function animateAll() { 
    //First the delay 
    //Do something with the sibling in this area 

    //If not last child, repeat and goto next sibling 
    if(currentSibling != $('li:last-child')) { 
    currentSibling = currentSibling.nextSibling; 
    animateAll(); //Recursive 
    } 
}