javascript - 如果在与最外层的 fadeIn 语句相同的元素上使用嵌套的 fadeOut，为什么不起作用？

Question

谁能告诉我为什么这$("#opening-first").fadeOut()条线没有执行？

$(document).ready(function(){

  $("#opening-first").fadeIn(1000).delay(1000, function() {
    $("#opening-second").fadeIn(1000, function() {
     $("#opening-first").fadeOut(1000, function() {
      $("#body-overlay").delay(1000).fadeOut(1000);
     });
    });
  });
});

似乎这应该很简单。这是HTML：

<div id="body-overlay">
  <div class="centered">
      <h1 id="opening-first">My name is Trevor Hinesley.</h1>
          <p class="medium" id="opening-second">And I like creating.</p>
  </div>
</div>

Answer 1

由于第一次延迟，您的代码无法正常工作。你看，第二个参数delay()应该是队列名称的字符串。您可以使用函数或使用“队列”的任何其他方法重用该队列名称，stop()但这并不重要，因为这不是您在这里所做的。

如果您想延迟第二次淡入，您的代码应如下所示：

$("#opening-first").fadeIn(1000, function() {
    $("#opening-second").delay(1000).fadeIn(1000, function() {
        $("#opening-first").fadeOut(1000, function() {
            $("#body-overlay").delay(1000).fadeOut(1000);
        });
    });
});

小提琴：http: //jsfiddle.net/rk4Bz/