为什么我不能使用jquery延迟addClass和removeClass？

Question

这是我的代码:

   $("#form_editor").addClass('abcd')
   $("#form_editor").delay(32000).removeClass('abcd')

如果我没有取消注释第二行,则该类永远不会被应用.如果我将其注释掉,那么该类将按预期应用.似乎第二行完全没有任何延迟地执行即忽略.delay(32000).

延迟是否适用于addClass和removeClass？我认为它会延迟对它之后出现的任何函数的调用,但显然不是因为它似乎立即执行.

Answer 1

你可以,但你需要 queue()

$("#form_editor").addClass('abcd').delay(3200).queue(function() {
  $(this).removeClass('abcd');
});

.abcd:before{
  content:"abcd";
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form_editor">efgh....</div>

或使用setTimeout方法:

var $formEditor = $("#form_editor"); // we plan to reuse it so let's cache it!

$formEditor.addClass('abcd'); // add

setTimeout(function(){
  $formEditor.removeClass('abcd');  // remove
}, 3200);

.abcd:before{
  content:"abcd";
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form_editor">efgh....</div>

jQuery动画(.animate,.fadeTo,fadeIn等...)添加到动画队列堆栈,一个jQuery内部函数,而不是处理"下一步是什么？" (懒散地说),而其他"无动画"方法(如.text(),addClass(),. on(),.click()等...)则不然.

轻松记住.queue()将其视为缺失(实际上)的回调功能.delay(2000, function(){ /*BAM!*/ }) /* well sadly, this does not works */