Javascript jQuery在旧包装器褪色后在新包装器中褪色

我有一个包含三个元素的

#包装器

。我将它们全部淡出整个屏幕。然后，一旦

#wrapper/whole

屏幕淡出，我将尝试

fadeIn

一张新图片

出于某种原因，

#baby grand

的最后一个

fadeIn

不起作用。知道我做错了什么吗

以下是脚本：

$(document).ready(function() {

    $("#paul-bedal").hide();

    $("#is-amidst").hide();

    $("#Paul-picture").hide();

    $("#baby-grand").hide();

    $(window).load(function() {
        $("#paul-bedal").fadeIn(3000, function() {
            $("#is-amidst").slideDown(4000, function() {
                $("#Paul-picture").fadeIn(3500, function() {
                    $("#wrapper").fadeOut(5000, function() {
                        $("#baby-grand").fadeIn(3500);
                    });
                });
            });
        });
    });
});

CSS:

正文{
最小宽度：960像素；
最大宽度：1200px；
左边距：自动；
右边距：自动；
}
#包装纸{
最小宽度：960像素；
最大宽度：1200px；
文本对齐：居中；
左边距：自动；
右边距：自动；
}
#保罗贝达尔{
高度：150像素；
宽度：650px；
边缘顶部：150px；
左边距：自动；
右边距：自动；
位置：相对位置；
字体大小：95px；
颜色：#E3；
文本阴影：5px 5px 5px#f6f6f6；
}
#在{
高度：100px；
宽度：650px；
边际上限：0px；
左边距：自动；
右边距：自动；
位置：相对位置；
字体大小：55px；
颜色：#E3；
字体：斜体；
文本阴影：5px 5px 5px#f6f6f6；
}
#保罗图片{
背景图片：url（/images/Paul Bedal.png）；
背景重复：无重复；
宽度：250px；
高度：500px；
浮动：对；
位置：绝对位置；
右边距：50px；
利润上限：-100px；
}
#大婴儿{
背景图片：url（/images/baby grand piano.png）；
宽度：100%；
边缘顶部：100px；
左边距：自动；
右边距：自动；
位置：相对位置；
文本对齐：居中；
}
保罗贝达尔
~z~现在正处于。。。

---

另外，请注意，

#baby grand

没有包装在

#wrapper

中，因此它是一个非常简单的维护页面。但是，最后一个

#baby grand

淡入功能在jQuery中不起作用。

您在#baby grand上的背景是psd。浏览器无法显示它。

原因是它是空的，没有任何高度。事实上，它会消失，但没有什么可显示的！试着通过css给它一些高度，看看它是否有效。

哦，天哪，我真不敢相信我刚刚这么做了。谢谢，曼妮，它实际上还是不起作用。现在是PNG了。所有代码都是一样的。

body {
    min-width:960px;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
}

#wrapper {
    min-width:960px;
    max-width:1200px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

#paul-bedal {
    height:150px;
    width:650px;
    margin-top:150px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    font-size:95px;
    color:#E3E3E3;
    text-shadow:5px 5px 5px #f6f6f6;
}

#is-amidst {
    height:100px;
    width:650px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    font-size:55px;
    color:#E3E3E3;
    font-style:italic;
    text-shadow:5px 5px 5px #f6f6f6;
}

#Paul-picture {
    background-image:url(/images/Paul-Bedal.png);
    background-repeat:no-repeat;
    width:250px;
    height:500px;
    float:right;
    position:absolute;
    margin-right:50px;
    margin-top:-100px;
}

#baby-grand {
    background-image:url(/images/baby-grand-piano.png);
    width:100%;
    margin-top:100px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    text-align:center;
}


<div id="wrapper">
    <div id="Paul-picture"></div>

    <div id="paul-bedal">
        Paul Bedal
    </div>

    <div id="is-amidst">
        ~is amidst right now...
    </div>
</div>
<div id="baby-grand"></div>