如何使用 jQuery 动画更改背景图像？
Posted
技术标签:
【中文标题】如何使用 jQuery 动画更改背景图像？【英文标题】：How do I change the background image using jQuery animation? 【发布时间】：2011-06-05 13:57:18 【问题描述】：我想用慢速动画改变背景图像，但它不起作用
$('body').stop().animate(background:'url(1.jpg)','slow');
语法有问题吗！！
【问题讨论】：
什么不起作用？速度还是任何一个？ 现在图像没有出现！！当我点击函数事件时！！ 【参考方案1】：您可以通过将图像不透明度淡化为 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，然后你可以淡入。
【讨论】：
这会起作用，除了它还会为body 的所有内容的不透明度设置动画。我不确定这就是 OP 所追求的。
@patrick 当然，我知道（没有插件）没有办法为背景不透明度设置动画，所以可能需要一些额外的 html 来获得这种效果？
@Marcus：是的，你是对的，它需要一些额外的 HTML，比如一个位于 z-index 的元素，它低于内容的其余部分，并延伸到整个宽度/高度的身体。编辑：我看到你已经更新了。很好的解决方案。 +1
.css('background-image': 'url(img/'result.bgimage')') 怎么把这个回调数据放到url中
@getaway 我不确定你的意思。你可以做'background-image': 'url(img/result.bgimage)'【参考方案2】：
来自 jQuery 文档：
非数字属性不能 使用基本的 jQuery 进行动画处理 功能。 （例如，宽度， 高度或左侧可以设置动画，但 background-color 不能。）
来源：http://api.jquery.com/animate/
【讨论】：
@getaway 使用 jQuery UI？还是一些插件？ background-COLOR 是数字，可以动画。 background-IMAGE 是非数字的，不能动画【参考方案3】：您不能为背景图像的添加/替换设置动画。 URL 是否存在。没有中间状态。
【讨论】：
【参考方案4】：实现这一点的方法可能是onclick添加一个带有背景图像的新类。然后动画这个？ 还是淡出图像以显示新图像？
【讨论】：
***.com/questions/253689/… 我用的是 iPhone，所以很难。但这里的一些答案可能会对您有所帮助。【参考方案5】：我会使用人造 div 将背景作为固定元素覆盖，然后为该元素设置动画，即：
<div id="bgDiv" style='display:none;background:URL("Water lilies.jpg");position:fixed; width: 100%; height: 100%; z-index: -1'></div>
<script type="text/javascript">
$(document).ready(function()
$('#bgDiv').toggle(1000); //You can plugin animate function here.
);
</script>
【讨论】：
【参考方案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)
);
);
【讨论】：
以上是关于如何使用 jQuery 动画更改背景图像？的主要内容，如果未能解决你的问题，请参考以下文章