Question

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

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

语法有问题!!

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

Answer 2

来自jQuery文档：

非数字属性不能使用基本的jQuery动画功能。（例如，宽度，高度，或左边可以动画但是背景颜色不能。）

来源：http://api.jquery.com/animate/

Answer 3

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

Answer 4

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

Answer 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>

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

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

6 个答案: