有重叠的过渡答案

【问题标题】：Transitions with overlaps有重叠的过渡
【发布时间】：2019-03-20 05:35:26
【问题描述】：

所以我有两个重叠的 div，由我的 CSS 设置，如下所示。

HTML：

    <body onLoad="present();">
    <div class="pre-wrap">
        <img src="images/logo.png" id="logo" alt="Pre Logo" style="display: table; margin: 0 auto;" />
    </div>

    <div class="wrap">
        <p>Test</p>
    </div>
    </body>

CSS：

.pre-wrap {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: red;
visibility: visible;
}

.wrap { 
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: black;
visibility: hidden;
}

我想，当 body 加载后，加载一个函数，它执行以下操作：淡入在 div .pre-wrap 中找到的图像，在显示几秒钟后，它将淡出图像并div .pre-wrap 将其可见性设置为隐藏。然后第二个 div .wrap 将淡入其所有内容。

我尝试了一些简单的 JS，但没有达到我想要的效果。

我要说的这个问题是独一无二的，因为它有重叠的 div，需要更改可见性。请注意，重叠已经起作用，只是需要做的只是 javascript 褪色。

我尝试了以下 JS，它非常简单，适用于我做过的其他项目，但不适用于这个。

function present() {
        $("#logo").fadeIn(3000);
    }

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这是我的代码。我删除了 CSS 中的属性可见性。并将#logo 的显示设置为无。不再需要 body 中的属性 onload。

var fadeTime = 3000;    // Time for fading
var waitingTime = 5000; // Time how long image is visible



$(window).ready(function(){
	$("#logo").fadeIn(fadeTime);
  
  setTimeout(function(){
  	$(".pre-wrap").fadeOut(fadeTime);
    $(".wrap").delay(fadeTime).fadeIn(fadeTime);
  },fadeTime+waitingTime);
  
});

.pre-wrap, .wrap{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 700px;
  width: 900px;
  opacity: 1.0;
  margin: auto;
}

.pre-wrap {
  background-color: red;
}

.wrap { 
  background-color: black;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pre-wrap">
  <img src="images/logo.png" id="logo" alt="Pre Logo" style="display: none; margin: 0 auto;" />
</div>

<div class="wrap">
  <p>Test</p>
</div>

【讨论】：