为什么fadeOut()等待delay()和hide()不等待呢？

Question

This你会发现一个例子：

<div id="first_div">First Div<div>
<div id="second_div">Second Div<div>

$('#first_div').show().delay(2000).fadeOut(300);
$('#second_div').show().delay(2000).hide();

如您所见，fadeOut()在2秒后被调用；hide()被立即调用。为什么？hide()不等待delay()函数。

Answer 1

来自Jquery Delay

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

基本上，fadeOut使用效果队列，因此被延迟。但是show()，hide()不跟随任何队列

Answer 2

快速粗略地看一眼documentation就会发现这一点

只延迟队列中的后续事件；例如，这不会延迟.show()或.hide()的无参数形式，它们不使用effects queue。

Answer 3

hide()只是将display设置为none，这样就不会发生可能会被排队的动画。

尝试：

$('#second_div').show().delay(2000).queue(function (n) {
  $(this).hide();
});

http://jsfiddle.net/RMMRj/1/

您还应该注意到jquery关于delay的免责声明。

对于队列jQuery效果之间的延迟，.delay()方法是最好的。因为它是有限的-例如，它没有提供一种取消延迟的方法-.Delay()不是JavaScript的原生setTimeout函数的替代品，后者可能更适合某些用例。

因此，这样做可能更合适：

setTimeout(function () {
  $('#second_div').hide();
}, 2000);