CODEWITHSUNDEEP
javascriptjquerycssfade
Sam Friday Welch
Sam Friday Welch

Reputation: 255

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?

Upvotes: 5

Views: 24229

Answers (3)

pashri
pashri

Reputation: 119

Like the @ITFarmer wait, you can do it in CSS3, but you could probably also animate the background-image with CSS3 too.

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeinbg {
    from {
        background-image: none;
    }
    to {
        background:url('body.png') no-repeat;
    }
}

.container {
    animation: fadein 2s;
}

.body {
    animation: fadeinbg 2s;

Upvotes: 1

Robin
Robin

Reputation: 7894

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.

Upvotes: 9

Developicus
Developicus

Reputation: 152

I'm not sure if it would also affect the background image, but you could do the fade-in effect also without jQuery. At least in browsers which support CSS3:

@keyframes fadein{
   from{opacity:0;}
   to{opacity:1;}
}
.someElement{
   animation: fadein 2s;
}

Upvotes: 0

Related Questions