微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 为什么我不能使用jquery延迟addClass和removeClass?

这是我的代码

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

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

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

解决方法:

你可以,但你需要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!* /}} / *的缺失(实际上)回调功能,很遗憾,这不起作用* /

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐