Javascript 重叠过渡

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

HTML:

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

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

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

我尝试了下面的JS，它非常简单，可以在我做过的其他项目中使用，但是在这个项目中没有

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

---

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

var fadeTime=3000；//退色时间
var waitingTime=5000；//图像可见的时间有多长
$（窗口）.ready（函数（）{
$（“#logo”）.fadeIn（fadeTime）；
setTimeout（函数（）{
$（“.pre-wrap”）.fadeOut（fadeTime）；
$（“.wrap”）.delay（fadeTime）.fadeIn（fadeTime）；
}，fadeTime+waitingTime）；
});
.pre-wrap、.wrap{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
高度：700px；
宽度：900px；
不透明度：1.0；
保证金：自动；
}
.预包装{
背景色：红色；
}
.wrap{
背景色：黑色；
显示：无；
}

试验

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


var fadeTime=3000；//退色时间
var waitingTime=5000；//图像可见的时间有多长
$（窗口）.ready（函数（）{
$（“#logo”）.fadeIn（fadeTime）；
setTimeout（函数（）{
$（“.pre-wrap”）.fadeOut（fadeTime）；
$（“.wrap”）.delay（fadeTime）.fadeIn（fadeTime）；
}，fadeTime+waitingTime）；
});
.pre-wrap、.wrap{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
高度：700px；
宽度：900px；
不透明度：1.0；
保证金：自动；
}
.预包装{
背景色：红色；
}
.wrap{
背景色：黑色；
显示：无；
}

试验


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

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