Почему это перемещает элементы 4 раза?

Почему это не работает? Эффект, который я пытаюсь достичь, состоит в том, что блоки перемещаются слева направо и начинают «толкать» следующих. Кажется, что проблема связана с вложенными обратными вызовами, выполняющими анимацию на внешних элементах.Почему это перемещает элементы 4 раза?

Может ли это объяснить это? Это сота работает, но все движется слишком много раз.

<html> 
<head> 
<style> 
.item { width: 49px; height: 49px; border: 1px solid orange; background-color: #ccccff; } 
#i0 { position: absolute; left: 0px; } 
#i1 { position: absolute; left: 150px; } 
#i2 { position: absolute; left: 200px; } 
#i3 { position: absolute; left: 250px; } 
#i4 { position: absolute; left: 400px; } 
#i5 { position: absolute; left: 450px; } 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
jQuery(function() { 
    $("#i0").animate({left:"+=100"}, function() { 
    $("#i0,#i1,#i2,#i3").animate({left:"+=100"}, function() { 
     $("#i0,#i1,#i2,#i3,#i4,#i5").animate({left:"+=50"}); 
    }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="i0" class="item"></div> 
    <div id="i1" class="item"></div> 
    <div id="i2" class="item"></div> 
    <div id="i3" class="item"></div> 
    <div id="i4" class="item"></div> 
    <div id="i5" class="item"></div> 
</body> 
</html>

источник

2009-03-20 Mark Renouf

Второй аргумент для animate() - это обратный вызов, который вызывается при завершении анимации. Так как $ ("# i0, # i1, # i2, # i3"). Animate (..) оживляет 4 вещи, он вызывает обратный вызов 4 раза. Такой подход может работать:

function move(i, left, callback) { 
    $("#i"+i).animate({left:left}, callback); 
} 

function sequence(n, left, callback) { 
    return function() { 
    var i = 0; 
    for (; i < n; i++) { 
     move(i, left); 
    } 
    move(i, left, callback); 
    } 
} 

jQuery(function() { move(0, "+=100", sequence(3, "+=100", sequence(5, "+=100"))) });

источник

2009-03-20 18:24:15 dstnbrkr

Не могли бы вы предложить решение? Я хотел бы обратный вызов один раз после того, как все элементы будут сделаны анимацией. Как я могу это сделать? –

Почему это перемещает элементы 4 раза?

ответ

Смежные вопросы