我如何使用jQuery的动画更换背景图片？ [英] How do I change the background image using jQuery animation?
问题描述
我想用缓慢的动画更改背景图片，但它不工作
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!!
推荐答案
您可以通过褪色图像不透明度为0取得类似的效果，然后更改背景图片，最后褪色图像回。
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.
这将需要一个div，一切都在页面上其它人的时候一样宽身体后面。
This will require a div, behind everything else on your page which is as wide as the body.
<body>
<div id="bg"></div>
...
</body>
您可以把它作为宽的页面使用CSS：
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});
});
您可以得到更多的交叉作用，通过让在这一个，然后你就可以在淡出顶部的第二个背景DIV。
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.
这篇关于我如何使用jQuery的动画更换背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
