Sam Friday Welch Sam Friday Welch - 2 months ago 9
jQuery Question

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?

Answer

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.