jQuery fade in new wrapper after old one faded

I have a #wrapper with three elements. I fadeIn/slideToggle them all then fade out the whole screen. Then, once the #wrapper/whole s开发者_运维知识库creen has faded out I'm trying to fadeIn a new picture.

For, some reason the last fadeIn of #baby-grand isn't working. Any idea what I'm doing wrong?

Here's the Script:

$(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>

Also, note that #baby-grand is not wrapped inside #wrapper, so it's a pretty simple maintenance page. But, the last #baby-grand fade in isn't working in jQuery.

Your background on the #baby-grand is a psd. Browser can't display it.

The reason is that is empty and doesn't have any height. It infact fades In but there is nothing to display! try to give it some height via css to see if it works or not.