将类添加到 div 的延迟方法

Question

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

JsFiddle

slider 是 1860px 宽，但一次只显示 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

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

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

（我知道 100 是一个随机值）。

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

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

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

Answer 1

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

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