如何使用 jQuery 动画更改背景图像? [英] How do I change the background image using jQuery animation?
本文介绍了如何使用 jQuery 动画更改背景图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用慢速动画更改背景图像，但它不起作用
I want to change the background image using slow animation, but its not working
$('body').stop().animate({background:'url(1.jpg)'},'slow');
是不是语法有问题！！
推荐答案
您可以通过将图像不透明度淡化为 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;
}
然后动画它的属性.
$('#bg')
.animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': 'url(1.jpg)'})
.animate({opacity: 1});
});
通过在这个背景 div 之上放置第二个背景 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屋！
查看全文
