javascript - シーケンス内の複数の DIV をアニメーション化する Javascript

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 アニメーションが完了すると、2 番目の div がアニメーションを開始し、次の 4 div が非表示になります。

Answer 1

Working FIDDLE Demo

RAW JavaScript を使用するのは少し難しいかもしれませんが、jQuery を使用したい場合は、再帰関数を使用できます。

$(function () {
    function show() {
        // get first hide element and show it 
        $('.project_box:not(.completed):first').show(500, function () {
            // mark it as completed
            $(this).addClass('completed');

            // show next one
            show();
        });
    }

    // invoke the function for the first time
    show();
});