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

【问题标题】：How do I change the background image using jQuery animation?如何使用 jQuery 动画更改背景图像？
【发布时间】：2011-06-05 13:57:18
【问题描述】：

我想用慢速动画改变背景图像，但它不起作用

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

语法有问题吗！！

【问题讨论】：

什么不起作用？速度还是任何一个？
现在图像没有出现！！当我点击函数事件时！！

标签： jquery image animation background

【解决方案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添加一个带有背景图像的新类。然后动画这个？还是淡出图像以显示新图像？

【讨论】：

stackoverflow.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)
    });    
});

【讨论】：