jQuery addClass中断延迟，或者jQuery延迟中断CSS转换，或者两者兼而有之

Either jQuery addClass breaks delay, or jQuery delay breaks CSS transition, or both

本文关键字：jQuery 延迟 或者 中断 兼而有之 转换 addClass CSS      更新时间：2023-09-26

我通过jQuery和CSS转换添加和删除类，制作了两个div，只需按下一个按钮就可以滑入和滑出可见性。在这个小提琴中，按下其中一个按钮可以使div滑动0.4秒：http://jsfiddle.net/uo14dowo/4/

但当我添加几个delays时，0.4s的转换突然变成了瞬时的：延迟和转换现在都不起作用。http://jsfiddle.net/uo14dowo/3/

为什么会这样？

show和hide默认情况下不是动画方法，但您可以通过传递duration参数来实现它们——在这种情况下，数字0:

var d= 400;
$("#btn-1").click(function() {
  $("#left").addClass('show').removeClass('clear').delay(d).show(0);
  $("#right").addClass('clear').removeClass('show').delay(d).hide(0);
});
$("#btn-2").click(function() {
  $("#left").removeClass('show').addClass('clear').delay(d).hide(0);
  $("#right").removeClass('clear').addClass('show').delay(d).show(0);
});

Fiddle

.delay（）只适用于动画方法。show（）不是一个动画方法。但是，如果您提供了一个值来显示它，则会使其处于动画状态。

尝试：

.delay(400).show(0)

来自文档：

在1.4版的jQuery中添加了.delay（）方法，它允许我们延迟队列中跟随它的函数的执行。它可以使用使用标准效果队列或自定义队列。只有队列中的后续事件被延迟例如，这不会延迟不使用的.show（）或.hide（）的无参数形式效果队列

在这里，我修改了您的fiddle，删除了show和hide调用，您可以看到转换不受延迟的影响。

相关文章：