这些动画如何排队？答案

【问题标题】：How can do these animations queuing?这些动画如何排队？
【发布时间】：2014-02-05 09:28:41
【问题描述】：

我有几个 div。（可能是 1 或 100）。我想为每个div运行一个动画。如果我使用下面的代码sn-p，所有动画都一起down。但是我希望动画在上一个动画之后运行。

我该怎么做？

<style>
div{
    width: 250px;
    height: 250px;
}
.move1{
    background-color: red;
}
.move2{
    background-color: green;
}
.move3{
    background-color: blue;
}
.move4{
    background-color: green;
}
.move5{
    background-color: red;
}
.move6{
    background-color: green;
}
</style>
<script>
    $(document).ready(function(){
        $('#btn1').click(function(){
            for(var i=1;i<7;i++){
                $('.move'+i).animate({height:'75px'},5000);
            }
        });
    });
</script>
<div class="move1"></div>
<div class="move2"></div>
<div class="move3"></div>
<div class="move4"></div>
<div class="move5"></div>
<div class="move6"></div>
<button id="btn1"> go </button>

【问题讨论】：

标签： jquery animation jquery-animate queue

【解决方案1】：

我找到了答案。首先，我们找到一个介于 0 和 7 之间的随机数。然后，我们定义一个函数。在函数中，所有动画都在上一个动画结束之后运行。

result x 随机框移动。

JavaScript 代码：

$(document).ready(function(){
    $('#btn1').click(function(){
        var num2= Math.floor(Math.random() * 7);
        var num=1;
        function c_a(num,num2){
            $('.move'+num).animate({height:'25px'},1000,function(){
                num=num+1;
                if(num<num2){
                    c_a(num,num2);
                }
            });
        }           
        if(num<num2){
            c_a(num,num2);
        }
    });
});

【讨论】：