jQuery fade in new wrapper after old one faded
<p>I have a <code>#wrapper</code> with three elements.  I <code>fadeIn</code>/<code>slideToggle</code> them all then fade out the whole screen.  Then, once the <code>#wrapper/whole</code> screen has faded out I'm trying to <code>fadeIn</code> a new picture.  </p>

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

<p>Here's the Script:</p>

<pre><code>$(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);
                    });
                });
            });
        });
    });
});
</code></pre>

<p>CSS:</p>

<pre><code>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;
}


&lt;div id="wrapper"&gt;
    &lt;div id="Paul-picture"&gt;&lt;/div&gt;

    &lt;div id="paul-bedal"&gt;
        Paul Bedal
    &lt;/div&gt;

    &lt;div id="is-amidst"&gt;
        ~is amidst right now...
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="baby-grand"&gt;&lt;/div&gt;
</code></pre>

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