Question

I have a #wrapper with three elements. I fadeIn/slideToggle them all then fade out the whole screen. Then, once the #wrapper/whole screen 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.

Answer 1

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.