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!!
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.
From the jQuery documentation:
properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)
Source: http://api.jquery.com/animate/
You can't animate the adding/replacing of a background image. The URL is either there or not. There's no in between state.