Question

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

但是当我添加一些delays时，0.4s的转换突然变为瞬间：延迟和转换现在都没有起作用。 http://jsfiddle.net/uo14dowo/3/

为什么会这样？

Answer 1

.delay（）仅适用于动画方法。 show（）不是动画方法。但是，如果您提供一个值来显示它，则会将其设置为动画。

尝试：

.delay(400).show(0)

Answer 2

默认情况下，

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

Answer 3

来自文档：

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

Here我修改了您的小提琴，移除了show和hide来电，您可以看到转换不受延迟的影响。

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

3 个答案: