将类添加到div的延迟方法

Question

我正在尝试创建一种“滑块”。我在一个名为#slider的div中的一行中有9个项目。

JsFiddle

slider宽度为1860像素，但一次仅显示620px（因为父级为overflow:hidden）

我希望将slider的位置移动，在延迟约6秒后，一次显示另外3个项目。然后它应该在6秒后再次移动，然后再回复。

所以我创建了两个类：

.slideLeft620{
    left:-620px;
}

.slideLeft1240{
    left:-1240px;
}

在标准之间制作动画（没有此left值）我希望允许内容显示为“幻灯片”。

所以我想：

1. 6秒后，将课程slideLeft620添加到slider
2. 再过6秒后，移除slideLeft620并将slideLeft1240添加到slider
3. 再过6秒后，删除课程slideLeft1240

这是我试图开始的（目前只做1号），但我无法让它发挥作用。

$("#slider").addClass("slideLeft620").delay(100);

（我知道100是mo的随机值）。

知道为什么这不起作用？延迟应该在片刻之后调用.addClass？

编辑：首先调用.delay的建议似乎不起作用：

$("#slider").delay(100).addClass("slideLeft620");

Answer 1

delay()仅适用于添加到FX队列的jQuery方法，这基本上只是动画方法，它不适用于addClass，您可以使用timeOut

setTimeout(function() {
    $("#slider").addClass("slideLeft620");
}, 100);