Javascript 为什么要移动元素4次？
为什么这样不行？我试图达到的效果是，这些块从左向右移动，然后开始“推”下一个块。嵌套回调在外部元素上执行动画似乎有问题 有人能解释一下吗？它有点工作，但一切都动了太多次Javascript 为什么要移动元素4次？,javascript,jquery,dom,browser,animation,Javascript,Jquery,Dom,Browser,Animation,为什么这样不行？我试图达到的效果是，这些块从左向右移动，然后开始“推”下一个块。嵌套回调在外部元素上执行动画似乎有问题 有人能解释一下吗？它有点工作，但一切都动了太多次 <html> <head> <style> .item { width: 49px; height: 49px; border: 1px solid orange; background-color: #ccccff; } #i0 { position: absolute; left: 0px
<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>
.项目{宽度：49px；高度：49px；边框：1px纯橙；背景色：#ccccff；}
#i0{位置：绝对；左：0px；}
#i1{位置：绝对；左：150px；}
#i2{位置：绝对；左：200px；}
#i3{位置：绝对；左：250px；}
#i4{位置：绝对；左：400px；}
#i5{位置：绝对；左：450px；}
jQuery（函数（）{
$（“#i0”）。动画（{left:+=100}，function（）{
$（“#i0，#i1，#i2，#i3”）。动画（{左：+=100}，函数（）{
$（“#i0，#i1，#i2，#i3，#i4，#i5”）。动画（{左：+=50“}）；
});
});
});
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"))) });
函数移动（i，左，回调）{
$（“#i”+i）.设置动画（{left:left}，回调）；
}
函数序列（n，左，回调）{
返回函数（）{
var i=0；
对于（；i