Search code examples
javascriptjquerycssfade

Fading in page on load

I am trying to use j-query to fade in my pages body upon load, however for some reason the body's background image is not being affected by the j-query. Please see the code I have below:

J-Query Code in head section:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('body').fadeIn(2000);
});
</script>

CSS Code:

body
{
overflow:hidden;
background:url('body.png') no-repeat;
background-size:100%;
display:none;
}

Everything contained within the body (div's / paragraphs / headings etc) fade in on load as per the j-query code, however the body's background image (body.png) loads instantly with the page. Please can anyone suggest what I'm doing wrong with the above code?

Solution

  • body behaves funny. You would need to wrap the contents of the entire page in another div and fade that in.

    <body>
    <div id="wrapper">
        # Page Contents #
    </div>
</body>

    CSS:

    #wrapper{
    background-image:url('some-image.jpg');
    display:none;
}

    jQuery:

    $(document).ready(function(){
    $('#wrapper').fadeIn();
});

    See this JSFiddle.