Javascript 使用jquery动画排列块

我有一个

div.content

，里面有30个div（

div.blocks

）

我想制作一个动画，以

div.blocks

来来去到它们自己的位置

例如：

CSS

.content{
    position:absolute;
    background:gray;
    width:100%;
    height:100%;
}

.blocks{
    display:inline-block;
    position:absolute;
    background:wheat;
    color:gray;
    font-size:large;
    width:50px;
    height:50px;
    margin-top:4px; 
}

---

HTML

<div class="content">
    <div class="blocks" data-number="0">1</div>
    <div class="blocks" data-number="1">2</div>
    <div class="blocks" data-number="2">3</div>
    <div class="blocks" data-number="3">4</div>
    <div class="blocks" data-number="4">5</div>
    <div class="blocks" data-number="5">6</div>
    <div class="blocks" data-number="6">7</div>
    <div class="blocks" data-number="7">8</div>
    <div class="blocks" data-number="8">9</div>
    <div class="blocks" data-number="9">10</div>
</div>

它工作得很好，但我希望动画一个接一个地运行（当一个动画完成时，回调），我的意思是当第一个

块

到达

右侧：10

，然后运行另一个。

您可以使用该功能

$（函数（）{
//[0][0]==顶部
//[0][1]=右
风险值头寸=[
[10,10],
[10,64],
[10,118],
[10,172],    
[10,226],    
[64,10],
[64,64],
[64,118],
[64,172],    
[64,226]    
];
$（“.blocks”）。每个（函数（索引）{
变量编号=（$（this.data（'number'））；
$（此）。延迟（500*索引）。设置动画({
前：职位[数量][0]，
右：职位[编号][1]
});
});
})

.content{
位置：绝对位置；
背景：灰色；
宽度：100%；
身高：100%；
}
.街区{
显示：内联块；
位置：绝对位置；
背景：小麦；
颜色：灰色；
字体大小：大号；
宽度：50px；
高度：50px；
利润上限：4倍；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

您可以使用setInterval（）函数调用您的函数 这是我的密码

$（函数（）{
//[0][0]==顶部
//[0][1]=右
函数类型器（回调）
{
风险值头寸=[
[10,10],
[10,64],
[10,118],
[10,172],    
[10,226],    
[64,10],
[64,64],
[64,118],
[64,172],    
[64,226]    
];
var i=0；
var interval=setInterval（函数（）{
var div=$（'[data number=“'+i+'”]）；
动画师({
前：职位[i][0]，
右：职位[i][1]
});
if（i==位置.长度）{
间隔时间；
回调（）；
返回；
}
i++；
},
300);
返回true；
}
打字机（函数（）{}）；
})

.content{
位置：绝对位置；
背景：灰色；
宽度：100%；
身高：100%；
}
.街区{
显示：内联块；
位置：绝对位置；
背景：小麦；
颜色：灰色；
字体大小：大号；
宽度：50px；
高度：50px；
利润上限：4倍；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

$(function(){
    // [0][0]==top
    // [0][1]=right
    var positions=[
    [10,10],
    [10,64],
    [10,118],
    [10,172],    
    [10,226],    

    [64,10],
    [64,64],
    [64,118],
    [64,172],    
    [64,226]    

    ];


    $( ".blocks" ).each(function() {
         var number=($(this).data('number'));
        $(this).animate({
            top:positions[number][0],
            right:positions[number][1]
        });
    });
})

$(".blocks").each(function(index) {
    $(this).delay(index * 500).animate({ ... });
});