Question

感谢this answer，我可以在3秒后得到一个淡出淡出的div。但是我不能在3秒后得到第二个div来淡入 - 这个div已经从0开始在屏幕上显示了。代码是：

 $(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是如何＆＃34;始终存在＆＃34;。我需要隐藏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>

Answer 2

我会在开头插入一个.hide，如下所示：

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

Answer 3

JQUERY SOLUTION，试试这个

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

将display:none添加到#red作为建议。

这里是DEMO

如何fadeOut一个div和fadeIn另一个div与jquery时间？

3 个答案: