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

Question

我有一个包含三个元素的#wrapper。我fadeIn/slideToggle，然后它们全部淡出整个屏幕。然后，一旦#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：

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>

另外，请注意，#baby-grand没有封装在#wrapper中，因此这是一个非常简单的维护页面。但是，最后一个#baby-grand淡入在jQuery中不起作用。

Answer 1

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

Answer 2

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