javascript - 如何逐步为 6 个盒子制作动画？

Question

这是我的 html...

        <div class="project">
            <div class="box">

            </div>
        </div>
        <div class="project">
            <div class="box">

            </div>
        </div>
        <div class="project">
            <div class="box">

            </div>
        </div>
        <div class="project">
            <div class="box">

            </div>
        </div>
        <div class="project">
            <div class="box">

            </div>
        </div>
        <div class="project">
            <div class="box">

            </div>
        </div>

这是我的javascript...

$('.box').each(function(){
            $(this).animate({
                width: 300,
                height: 200,
                top: 0,
                left: 0
            }, 500);
        });

我希望每个盒子一个接一个地动画。我可以专门这样做，但是代码真的很长，包含所有回调。想知道如何正确地遍历它们？

Answer 1

您可以研究递归函数。

function animateBox(i) {
    $('.box').eq(i).animate({ // animate this one
                    width: 300,
                    height: 200,
                    top: 0,
                    left: 0
                }, 500,
    function() { // when this one is complete
        if($('.box').eq(i + 1).length > 0) { // if next one availabe
            animateBox(i + 1); // call recursively for next one
        }
   });
}

animateBox(0); // start process

http://jsfiddle.net/pimvdb/753yU/