延迟切换类答案

【问题标题】：toggleClass with delay延迟切换类
【发布时间】：2016-05-27 20:17:15
【问题描述】：

在这个stackoverflow post 中，接受的答案声称可以延迟使用toggleClass。但是我在官方jquery API website上没有找到任何关于延迟参数的信息。

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

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

div {
  border: 1px dashed black;
}
.light {
  background-color: white;
}
.dark
{
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="light" id="test">
    <p style="color:red">click here</p>
</div>

【问题讨论】：

它是 jQueryUI 的一部分，而不是 jQuery。文档的答案中甚至还有一个链接：jqueryui.com/toggleClass
这不仅仅是 jQuery，它是 jQueryUI
我是新手，所以我不知道有什么区别。

标签： javascript jquery html css

【解决方案1】：

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

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

这比 jQuery 功能更有效；）

【讨论】：

感谢您的回答，它有效，但不幸的是没有褪色。 jsfiddle.net/dzzk8oxu/1
@EdwardBlack 渐变动画应该在你的css中设置（例如stackoverflow.com/questions/4411306/…）

【解决方案2】：

这是因为延迟行为是由 jQuery UI 库添加的。

您在示例中仅使用了 jQuery 库。

jQuery website

jQuery UI website

如果您包含 jQuery UI，则您的示例有效：

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

div {
  border: 1px dashed black;
}

.light {
  background-color: white;
}

.dark {
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="light" id="test">
  <p style="color:red">click here</p>
</div>

【讨论】：

【解决方案3】：

.delay() 方法允许您延迟执行队列中跟随它的函数。它可以与标准效果队列或自定义队列一起使用，仅延迟队列中的后续事件。例如，这不会延迟不使用效果队列的 .toggleClass() 或 .show() 或 .hide() 的无参数形式。

【讨论】：

【解决方案4】：

像这样使用它：

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

【讨论】：

在自己测试之前不要发布答案。