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);
        });
    });
});

fiddle :http://jsfiddle.net/rk4Bz/