延迟toggleClass

Question

在这个堆叠溢流柱中，公认的答案声称有可能在延迟的情况下使用toggleClass。但是我没有在官方的jquery网站上找到任何关于延迟参数的信息。

我试过了，但是在点击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>

​

Answer 1

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

在示例中只使用jQuery库。

jQuery网站

jQuery用户界面网站

如果包含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>

​

Answer 2

可以使用基本超时函数执行此操作：

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

这比jQuery特性更有效;)

Answer 3

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