Menu
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?
296
The Fade In/Fade Out behavior lets you dissolve into and out of any object by ramping the opacity of the object from 0 percent to 100 percent at the start, and then back to 0 percent at the end. You can eliminate the fade-in or fade-out effect by setting the duration of the Fade In Time or Fade Out Time to 0 frames.
The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
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.
165
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
