首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何使用jQuery动画更改背景图像?

如何使用jQuery动画更改背景图像?
EN

Stack Overflow用户
提问于 2011-01-08 06:43:43
回答 6查看 94.5K关注 0票数 18

我想改变背景图像使用缓慢的动画,但它不工作

代码语言:javascript
代码运行次数:0
运行
复制
 $('body').stop().animate({background:'url(1.jpg)'},'slow');

语法有问题吗!!

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2011-01-08 06:51:50

您可以通过将图像不透明度淡入0,然后更改背景图像,最后再次淡入图像来获得类似的效果。

这将需要一个div,在页面的其他所有内容后面,它与正文一样宽。

代码语言:javascript
代码运行次数:0
运行
复制
<body>
    <div id="bg"></div>
    ...
</body>

您可以使用CSS使其与页面一样宽:

代码语言:javascript
代码运行次数:0
运行
复制
#bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

然后对其属性进行动画处理。

代码语言:javascript
代码运行次数:0
运行
复制
$('#bg')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': 'url(1.jpg)'})
            .animate({opacity: 1});
    });

你可以得到更多的交叉效果,通过在这个上面有第二个背景div,然后你可以淡入。

票数 47
EN

Stack Overflow用户

发布于 2011-01-08 06:48:54

从jQuery文档中:

不能使用基本的jQuery功能为非数字的

属性设置动画。(例如,可以为宽度、高度或左侧设置动画,但不能设置背景色。)

来源:http://api.jquery.com/animate/

票数 1
EN

Stack Overflow用户

发布于 2011-01-08 06:49:08

您不能对添加/替换背景图像进行动画处理。URL是否存在。没有中间状态。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4630947

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档