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

谁能告诉我为什么这个$("#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>

最佳答案

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

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

$("#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/

关于javascript - 如果在与最外面的fadeIn语句相同的元素上使用嵌套的fadeOut，为什么不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16599225/