Menu
I want to change the background image using slow animation, but its not working
$('body').stop().animate({background:'url(1.jpg)'},'slow');
Is there something wrong with the syntax!!
937
The background color animate can be performed with the help of the animate() function or css() function. The background color animate is used to set the background color of the selected elements.
We can move the background image using CSS3 animation property that gives an illusion of running video. CSS3 animation is supported by all modern browsers.
backgroundImage = "url('image. png')"; You need to put the relative path to the image from your web page's folder. If the image is located in the same folder, then you can reference it directly inside the url() function as in the code above.
jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);
You can get a similar effect by fading the image opacity to 0, then change the background image, and finally fading the image back in again.
This will require a div, behind everything else on your page which is as wide as the body.
<body>
<div id="bg"></div>
...
</body>
You can make it as wide as the page using CSS:
#bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
And then animate it's properties.
$('#bg')
.animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': 'url(1.jpg)'})
.animate({opacity: 1});
});
You could get more of a crossover effect, by having a second background div on top of this one, which you can then fade in.
51
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
