Question

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

我该怎么做？

<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>

Answer 1

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

x随机盒移动的

result。

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);
        }
    });
});

怎么能这些动画排队？

1 个答案: