我想使用慢速动画更改背景图像,但它不起作用
$('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/