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/

Answer 2

您可以将它全部包装到您从完成函数中调用的函数中。

function animateAll() {
    var boxes = $(".box");
    if (boxes.length == 0) return;

    function animateBox(n) {
        $(boxes.get(n)).animate({
            width: 300,
            height: 200,
            top: 0,
            left: 0
        }, 500, function() {
             ++n;
             if (n < boxes.length) {
                 animateBox(n);
             }
        });
    }

    animateBox(0);   // start the first one
}

Answer 3

我花了一会儿，但我明白了：）

<强> Working Example

它使用递归函数来选择行中的下一个元素，如果该元素不存在，则会停止该函数。

代码：

var i = 0;

    function animate_next() {
        if ($('.box:eq('+i+')').length == 0) {
            return false;
        }
        $('.box:eq('+i+')').animate({
            width: 300,
            height: 200,
            top: 0,
            left: 0
        }, 500,function() { i++; animate_next(); });

    }
    animate_next();

如何逐步动画6个框？

3 个答案: