Javascript按顺序动画几个DIV

Question

我想按顺序为 div 设置动画，但不知道该怎么做，这是我想要设置动画的代码

<div id="project_container">
    <div class="project_box">
        <img src="images/project.jpg">
    </div>
    <div class="project_box">
        <img src="images/project1.jpg">
    </div>
    <div class="project_box">
        <img src="images/project2.jpg">
    </div>
    <div class="project_box">
        <img src="images/project3.jpg">
    </div>
    <div class="project_box">
        <img src="images/project4.jpg">
    </div>
    <div class="project_box">
        <img src="images/project5.jpg">
    </div>
</div>

这里我们有类似类型的 6 个 div，名称为 .当动画开始第一个 div 动画和其他 5 个 div 隐藏时，当第一个 div 动画完成时，第二个 div 开始动画和接下来的 4 个 div 隐藏，类似地当第二个 div 完成动画时，第三个 div 开始这些动画在最后一个 div 动画完成时继续。

Answer 1

我会使用 jQuery 来制作动画。查看工作演示:

FIDDLE Example

为了快速引用，这里是 javascript 代码:

var box_count = -1;
// store boxes in a variable for later reference, this increases javascript speed
var boxes = $('#project_container').children();

// initially hide all boxes
boxes.hide();


var animate_box = function(){
    // get next box
    box_count++;

    //check if boxes are left
    if(box_count < boxes.length ){ 
        //do your Animation
        $(boxes[box_count]).fadeIn({
            //call animation again once complete
            complete: animate_box
        });
    }
}

//start first animation
animate_box();