Addclass 延迟列表答案

【问题标题】：Addclass on delay for a listAddclass 延迟列表
【发布时间】：2014-02-12 17:14:06
【问题描述】：

我正在使用主干视图呈现列表。呈现视图后，我想循环遍历列表元素，然后一次将一个类添加到一个 li （每次从前一个中删除它）。

到目前为止，我的代码如下所示：

  onRender: function() {
    $('ul > li').each(function(i, element) {
      $(element).delay(i * 50000).toggleClass('fly-in-out')
    })
  }

然而，当视图加载时，所有 li 都有 fly-in-out 类。

非常感谢任何帮助

【问题讨论】：

Adding class after random delay的可能重复
toggleClass 不是动画函数，所以不会加入到 fx 队列中。最简单的解决方案是使用setTimeout。
您可以使用promise 并在toggleClass 方法完成后进行递归调用。 $(this).toggleClass('fly-in-out', 1000).promise().done(function(){alert("done")})
或者你可以把toggleClass()放到队列中

标签： jquery list addclass

【解决方案1】：

使用延迟，您需要将代码放入队列中：

onRender: function () {
    $('ul > li').each(function (i, element) {
        $(element).delay(i * 50000).queue(function (next) {
            $(this).toggleClass('fly-in-out');
            next();
        });
    })
}

或者使用超时：

onRender: function () {
    $('ul > li').each(function (i, element) {
        setTimeout(function () {
            $(element).toggleClass('fly-in-out');
        }, i * 50000);
    })
}

【讨论】：

两者似乎都只是在第一个 li 中添加了一个类

【解决方案2】：

您的$(element).delay 仅指一个元素，而不是所有元素。这是通过并将类一次应用于每个元素而不访问任何其他元素

【讨论】：