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

Question

我制作了两个 div，它们可以在按下按钮时滑入和滑出可见性，方法是添加和移除类以及 jQuery 和 CSS过渡。在这个 fiddle 中，按下其中一个按钮可以使 div 滑动超过 0.4 秒：http://jsfiddle.net/uo14dowo/4/

但是当我添加一些 delays 时，0.4 秒的过渡突然变得瞬间：现在延迟和过渡都不起作用。 http://jsfiddle.net/uo14dowo/3/

这是为什么？

Answer 1

.delay() 仅适用于动画方法。 show() 不是动画方法。但是，如果您提供一个值来显示它，它就会使其具有动画效果。

尝试：

.delay(400).show(0)

Answer 2

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

来自文档：

Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

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

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

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

javascript

css

jquery

delay