延迟添加类/删除类功能不起作用答案

【问题标题】：delayed addclass/remove class function not working延迟添加类/删除类功能不起作用
【发布时间】：2011-02-10 16:43:04
【问题描述】：

我在这里做什么？

$(function() {
$('ul li:nth-child(1)').addClass("go").delay(4500).removeClass("go");
$('ul li:nth-child(2)').addClass("go").delay(1500).removeClass("go");
$('ul li:nth-child(3)').addClass("go").delay(500).removeClass("go");
$('ul li:nth-child(4)').addClass("go").delay(4500).removeClass("go");
$('ul li:nth-child(5)').addClass("go").delay(1000).removeClass("go");
});

【问题讨论】：

稍微解释一下会很方便。我猜您正在尝试通过在每个项目的不同延迟后设置它来以特定顺序更改列表的类。什么位不起作用？
.delay() 只延迟动画，不延迟函数

标签： jquery addclass

【解决方案1】：

只是添加，你可以使用.queue：

$('ul li:nth-child(1)').addClass("go")
                       .delay(4500)
                       .queue(function() {
                           $(this).removeClass("go");
                           $(this).dequeue();
                       });

【讨论】：

啊我忘了这个+1。不过不要忘记.dequeue() 或next()！
它仍然是同样的问题 - 类同时添加到列表项中......然后它们在不同的时间被删除检查：jsfiddle.net/bM6uY/8
@BizarroZeldman 鉴于为每个 li 设置的延迟具有不同的值，该小提琴似乎完全展示了我所期望的行为。

【解决方案2】：

.delay() 仅设计用于动画。您将不得不使用常规的 setTimeouts 来完成您正在做的事情：

var li = $('ul li:nth-child(1)').addClass('go');
setTimeout(function () {
    li.removeClass('go');
}, 4500);

为了让每个<li> 的操作更加愉快，您可以像这样重构您的代码：

$(function () {
    var delays = [4500, 1500, 500, 4500, 1000];
    $('ul li').addClass('go').each(function (i) {
        setTimeout(function (li) {
            li.removeClass('go');
        }, delays[i], $(this));
    });
});

【讨论】：

我正在创建一个动画，其中会有一堆列表项 'display : none;然后，我需要为每个列表项添加一个类，一次一个，持续一段预定的时间，只有在时间过去后，该类才被删除并添加到下一个列表项中。在这一点上，相同的类将被添加到下一个列表项中，时间完全不同。一秒
thx，它有点工作......如果你看你会看到所有类都在同一时刻应用（它们都在完全相同的时间变成蓝色）然后它们都以不同的时间间隔消失.我需要将该类仅应用于一个列表项，一旦时间过去，然后将其应用于下一个列表项