如何使用jQuery动画更改背景图像？
如何使用jQuery动画更改背景图像？
提问于 2011-01-07 22:43:43
我想改变背景图像使用缓慢的动画，但它不工作
$('body').stop().animate({background:'url(1.jpg)'},'slow');语法有问题吗！！
回答 6
Stack Overflow用户
回答已采纳
发布于 2011-01-07 22:51:50
您可以通过将图像不透明度淡入0，然后更改背景图像，最后再次淡入图像来获得类似的效果。
这将需要一个div，在页面的其他所有内容后面，它与正文一样宽。
<body>
<div id="bg"></div>
...
</body>您可以使用CSS使其与页面一样宽：
#bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}然后对其属性进行动画处理。
$('#bg')
.animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': 'url(1.jpg)'})
.animate({opacity: 1});
});你可以得到更多的交叉效果，通过在这个上面有第二个背景div，然后你可以淡入。
Stack Overflow用户
发布于 2011-01-07 22:48:54
从jQuery文档中：
不能使用基本的jQuery功能为非数字的
属性设置动画。(例如，可以为宽度、高度或左侧设置动画，但不能设置背景色。)
Stack Overflow用户
发布于 2011-01-07 22:49:08
您不能对添加/替换背景图像进行动画处理。URL是否存在。没有中间状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4630947
复制
相似问题
使用jquery动态更改和动画背景图像
如何使用jquery和css使用动画更改单击背景图像
jQuery背景-图像动画
使用动画更改背景图像
使用jquery动画更改背景颜色
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
