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

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/