jquery - 如何使用jquery计时淡出一个div并淡入另一个div？

Question

感谢this answer ，我可以让 div 在 3 秒后淡出。 但我无法让第二个 div 在 3 秒后淡入 - 该 div 已经从零开始出现在屏幕上。代码是:

 $(document).ready( function() {
    $('#blue').delay(3000).fadenOut(100);
    $('#red').delay(3000).fadeIn(100);
  });

演示:http://www.casedasole.it/stack/

这个想法是让 div 1(蓝色)溶解并显示 div 2(红色)。

请注意:我已经偏移了 div 1 以显示 div 2 如何“始终存在”。我需要隐藏 div 2，因为在测试中，div 2 出现在 div 1 覆盖它之前。

Answer 1

您应该在#red的样式中添加display:none;，这样当您最初打开页面时它就会被隐藏。

 $(document).ready(function() {
   $('#blue').delay(3000).fadeOut(100);
   $('#red').delay(3000).fadeIn(100);
 });

html,
body {
  background-color: yellow
}
#red {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100;
  background-color: #f00;
  display: none;
}
#blue {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 200;
  background-color: #00f;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="blue"></div>
<div id="red"></div>