Javascript 在列表元素上循环播放相同的动画，而不使用大量回调函数

我这样做的目的是遍历每个列表元素，并在视图中设置动画，同时使用

marginLeft

将其向右移动30px。我试图在每个动画之间获得6秒的延迟。到目前为止，我只能得到第一个和第二个列表元素来执行此操作。我如何使它能够在不使用一堆回调函数的情况下遍历每个列表元素？请注意，

.animate list

类是

.ul

元素。我还需要在加载文档时显示第一个列表元素，然后将之后的每个列表元素延迟6秒

function doAnimate(){
    $(document).ready(function(){
                $('.animate-list li').css({
                    opacity:0,
                    marginLeft : '0px'
                });
    });

    $('.animate-list li:first-child').animate({
        opacity:1,
        marginLeft : '30px'
    },1000,'linear',function nextAnimate(){

    $(this).next('li').delay(6000).animate({
            opacity:1,
            marginLeft:'30px'
            },1000,'linear',function(){
            nextAnimate; // loop back to next 'li' ???
        });

    });
};

doAnimate();    

---

使用计数器，并在完成每个项目时让动画函数调用自身：

$（文档）.ready（函数（）{
var i，列表；
列表=$（'.animate list li'）；
list.css({
不透明度：0，
marginLeft:'0px'
});
i=-1；
制作动画（）；
函数animate（）{
如果（++i

首先
第二
第三
第四
第五
第六

使用计数器，并在处理每个项目时调用动画功能：


$（文档）.ready（函数（）{
var i，列表；
列表=$（'.animate list li'）；
list.css({
不透明度：0，
marginLeft:'0px'
});
i=-1；
制作动画（）；
函数animate（）{
如果（++i

首先
第二
第三
第四
第五
第六

根据T.J.Crowder的回答，我能够使第一个列表元素在文档加载时出现，然后其余元素以6秒的延迟进行动画：

$(document).ready(function () {

    var i, list;

    list = $('.animate-list li');

    list.css({
        opacity: 0,
        marginLeft: '0px'
    });


    i = -1;
    animate();

    function animate() {
        if (++i < list.length) {
            if (i == 0) {
                list.eq(i).animate({
                    opacity: 1,
                    marginLeft: '30px'
                }, 1000, 'linear', animate);
            }
            else {
                list.eq(i).delay(6000).animate({
                    opacity: 1,
                    marginLeft: '30px'
                }, 1000, 'linear', animate);
            }
        }
    }
});

$（文档）.ready（函数（）{
var i，列表；
列表=$（'.animate list li'）；
list.css({
不透明度：0，
marginLeft:'0px'
});
i=-1；
制作动画（）；
函数animate（）{
如果（++i
根据T.J.Crowder的回答，我能够使第一个列表元素在文档加载时出现，然后其余元素以6秒的延迟进行动画：

$(document).ready(function () {

    var i, list;

    list = $('.animate-list li');

    list.css({
        opacity: 0,
        marginLeft: '0px'
    });


    i = -1;
    animate();

    function animate() {
        if (++i < list.length) {
            if (i == 0) {
                list.eq(i).animate({
                    opacity: 1,
                    marginLeft: '30px'
                }, 1000, 'linear', animate);
            }
            else {
                list.eq(i).delay(6000).animate({
                    opacity: 1,
                    marginLeft: '30px'
                }, 1000, 'linear', animate);
            }
        }
    }
});

$（文档）.ready（函数（）{
var i，列表；
列表=$（'.animate list li'）；
list.css({
不透明度：0，
marginLeft:'0px'
});
i=-1；
制作动画（）；
函数animate（）{
如果（++i
这可以通过以下组合实现：


每个li元素的“fx”队列生成的承诺
array.reduce（）
有效创建包含所需动画序列的.then（）链

代码很简洁，但如果您不熟悉承诺，代码看起来会有点陌生：


$（文档）.ready（函数（）{
//此函数用于启动动画并返回动画完成的承诺
功能动画（li）{
返回$（li）。设置动画({
不透明度：1，
marginLeft:'30px'
}，1000，'linear'）。延迟（6000）。promise（）；/。promise（）生成动画完成的承诺
}
$（'.animate list li'）.css（{//初始css（隐藏）
不透明度：0，
marginLeft:'0px'
}).get（）.reduce（函数（p，li）{
返回p.then（函数（）{
返回动画（li）；
});
}，$.when（））；//$.when（）是启动then（）链的已解析承诺。
});

首先
第二
第三
第四
第五
第六

这可以通过以下组合实现：


每个li元素的“fx”队列生成的承诺
array.reduce（）
有效创建包含所需动画序列的.then（）链

代码很简洁，但如果您不熟悉承诺，代码看起来会有点陌生：


$（文档）.ready（函数（）{
//此函数用于启动动画并返回动画完成的承诺
功能动画（li）{
返回$（li）。设置动画({
不透明度：1，
marginLeft:'30px'
}，1000，'linear'）。延迟（6000）。promise（）；/。promise（）生成动画完成的承诺
}
$（'.animate list li'）.css（{//初始css（隐藏）
不透明度：0，
marginLeft:'0px'
}).get（）.reduce（函数（p，li）{
返回p.then（函数（）{
返回动画（li）；
});
}，$.when（））；//$.when（）是启动then（）链的已解析承诺。
});

首先
第二
第三
第四
第五
第六

我很抱歉没有说得更清楚。我需要在加载文档时显示第一个列表元素，而不是没有6000毫秒的延迟。我将修改我的问题。@user3386635:调整上面的内容很容易。最基本的技巧是回答的重点，而不是写出准确的答案