Javascript 延迟切换类

在这一点上，公认的答案声称可以延迟使用

toggleClass

。但我没有在官方网站上找到任何关于延迟参数的信息

我试过了，但点击div后没有延迟

$（“div#test”）。单击（函数（）{
$（this.toggleClass（'light'，2000）。toggleClass（'dark'，2000）；
});
div{
边框：1px黑色虚线；
}
.光{
背景色：白色；
}
.黑暗
{
背景色：黑色；
}

单击此处

像这样使用它：

$("div#test").click(function() {
    $(this).delay(2000).toggleClass('light').toggleClass('dark');
});

这是因为延迟行为是由jQueryUI库添加的

在示例中，您只使用jQuery库



如果包含jQuery UI，您的示例将起作用：


$（“div#test”）。单击（函数（）{
$（this.toggleClass（'light'，2000）。toggleClass（'dark'，2000）；
});
div{
边框：1px黑色虚线；
}
.光{
背景色：白色；
}
.黑暗{
背景色：黑色；
}

单击此处

您可以使用基本超时功能执行此操作：

$("div#test").click(function () {
    var el = $(this);
    window.setTimeout(function() {
        el.toggleClass('light').toggleClass('dark');
    }, 2000);
});

这比jQuery功能更有效；）
 使用
.delay（）
方法可以延迟队列中跟随它的函数的执行。它可以与标准效果队列或自定义队列一起使用，只有队列中的后续事件才会延迟。例如，这不会延迟不使用效果队列的
.toggleClass（）
或
show（）
或
.hide（）
的无参数表单。
它是jQueryUI的一部分，而不是jQuery。文档的答案中甚至有一个链接：这不仅仅是jQuery，而是jQueryUI。我是一个新手，所以我不知道有什么区别。谢谢你的回答，它很有效，但不幸的是没有褪色@爱德华·布莱克：褪色动画应该在css中设置（参见示例），在自己测试之前不要发布答案。