これが要素を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（）の第2引数は、アニメーションが完了すると呼び出されるコールバックです。 $（ "＃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回移動させるのはなぜですか？

答えて

関連する問題