Question

在此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>

Answer 1

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

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

这比jQuery功能更有效;）

Answer 2

这种情况正在发生，因为延迟行为是由jQuery UI库添加的。

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

jQuery website

jQuery UI website

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

Answer 4

像这样使用：

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

延迟

4 个答案: