Javascript JQuery中的动画序列

我写这段代码是为了制作一些动画，它工作得非常好：

    for (var i = 0; i < $("div[id$='-1']").length; i++) {
            $("div[data-order="+ i +"]").css({opacity: 0, visibility: "visible"}).animate({
                top : '0%',
                opacity: 1 
            }, {
                duration : 800,
                easing : 'linear'
            });
    };

for（变量i=0；i<$（“div[id$='-1']）。长度；i++）{
$（“div[data order=“+i+”]”）css（{opacity:0，visibility:visible“}）。动画({
顶部：“0%”，
不透明度：1
}, {
持续时间：800，
放松：“线性”
});
};

但是当我想用setTimeout按顺序显示它时，它就不再工作了

    for (var i = 0; i < $("div[id$='-1']").length; i++) {
        setTimeout(function() {
            $("div[data-order="+ i +"]").css({opacity: 0, visibility: "visible"}).animate({
                top : '0%',
                opacity: 1 
            }, {
                duration : 800,
                easing : 'linear'
            });
        }, 1000);
    };

for（变量i=0；i<$（“div[id$='-1']）。长度；i++）{
setTimeout（函数（）{
$（“div[data order=“+i+”]”）css（{opacity:0，visibility:visible“}）。动画({
顶部：“0%”，
不透明度：1
}, {
持续时间：800，
放松：“线性”
});
}, 1000);
};

你可以试试这个。。您可以使用

.each（）

使用数学：

setTimeout(function () {
  // ...
}, 1000 * i);

您可以使用

.queue（）

，

.delay（）

，

.promise（）

---

尝试将循环与动画代码放在设定的超时时间内。

setTimeout

不会阻止循环继续。基本上，每次迭代都会有相同的

setTimeout

，并立即停止。@JF机械装置这样，动画仍会在同一时间显示，我想做一些延迟，以便顺序可以显著。确切：）那是我的错误@也许你完全受欢迎：）。。祝你好运

setTimeout(function () {
  // ...
}, 1000 * i);

var order = $("div[data-order]");
order.queue("order", $.map(order, function(el) {
  return function(next) {
    return $(el).delay(1000).css({opacity: 0, visibility: "visible"})
           .animate({
                top : '0%',
                opacity: 1 
            }, {
                duration : 800,
                easing : 'linear'
            }).promise().then(next);

  }
})).dequeue("order")