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

我想用慢动画改变背景图像，但它无法正常工作

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

语法有问题!!

Answer 1

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

这将需要一个div，在页面上与身体一样宽的其他内容之后。

  
 ...  

您可以使用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来获得更多的交叉效果，然后你可以淡入其中。

Answer 2

从jQuery文档：

使用基本jQueryfunction无法为非数字属性设置动画。 （例如，宽度，高度或左侧可以设置动画，但背景颜色不能。）

资料来源： http ： //api.jquery.com/animate/

Answer 3

您无法为添加/替换背景图像设置动画。 URL是否存在。 国家之间没有。

Answer 4

实现这一目标的方法可能是onclick添加一个带有背景图像的新类。然后动画这个？ 或者淡出图像以显示新图像？

Answer 5

我会使用一个虚拟div来覆盖背景作为固定元素，然后为该元素设置动画，即：

Answer 6

我是这样做的：

 $(this).animate({ opacity: 0 }, 100, function() { // Callback $(this).css("background-image", "url(" + new_img + ")").promise().done(function(){ // Callback of the callback :) $(this).animate({ opacity: 1 }, 600) }); });