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

标签 jquery image animation background

我想使用慢速动画更改背景图像,但它不起作用

 $('body').stop().animate({background:'url(1.jpg)'},'slow');

语法有问题吗!!

最佳答案

您可以通过将图像不透明度淡化为 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 之上放置第二个背景 div,您可以获得更多的交叉效果,然后您可以淡入该背景。

关于jquery - 如何使用 jQuery 动画更改背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4630947/

相关文章:

JavaScript - 防止用户在输入文本中复制粘贴特殊字符?

iphone - iOS——将 UIImage 对象的 R、G、B 和 A 分量乘以常量?

php - 如何删除图像中的透明色?

CSS3 动画 : Background-position with steps - image blinks

animation - TabView 的 SwiftUI 动画选项卡

Javascript - 交互式粒子 Logo 不起作用

javascript - 检测特定的ajax事务

jquery - 将图片从 src 发布到服务器

python - 将图像上传到 Google App Engine 并与用户共享图像

javascript - jQuery 多个 else if 语句