javascript - 通过更改类名一个接一个地为对象设置动画

Question

$(document).ready(function () {
    $('.box1').addClass('animated').delay(50).queue(function () {
        $('.box2').addClass('animated').delay(50).queue(function () {
            $('.box3').addClass('animated').delay(50).queue(function () {
                $('.box4').addClass('animated').delay(50).queue(function () {
                    $('.box5').addClass('animated').delay(50).queue(function () {
                        $('.box6').addClass('animated').delay(50).queue(function () {

                        });
                    });
                });
            });
        });
    });
});

我需要知道如何简化这个（比如使用++i）。我在页面加载时需要这个动画。

没有所有类（.box1，...）的动画类型代码。

Answer 1

You can give all of the "box"es the same class and try something like this:

(function () {
    var index = 0;

    function start() {
        $('.box:eq(' + index + ')').addClass('animated');
        ++index;
        setTimeout(start, 50);
    };
    start();
})();

Demo: http://jsfiddle.net/maniator/kQWgj/

Or something like this to cache all of the "box"es:

(function () {
    var index = 0;
    var boxes = $('.box');

    function start() {
        boxes.eq(index).addClass('animated');
        ++index;
        setTimeout(start, 50);
    };
    start();
})();

Demo: http://jsfiddle.net/maniator/6QseP/