Reputation: 255
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
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
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
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