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

Question

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

18

我想使用缓慢的动画效果更改背景图像，但是它没有起作用。

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

语法有问题吗！！

- getaway

哪一部分没有工作？速度还是其他什么？ - Matt Asbury

现在图片没有出现！！当我点击函数事件时！！ - getaway

6个回答

1

来自jQuery文档：

基本的jQuery功能无法对非数字属性进行动画处理。（例如，可以对宽度、高度或左侧进行动画处理，但不能对背景颜色进行处理。）

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

- Šime Vidas

使用jQuery UI？还是一些插件？ - Šime Vidas

背景颜色是数字化的，可以进行动画处理。背景图片是非数字化的，无法进行动画处理。 - Hussam

1

你无法对添加/替换背景图片进行动画处理。URL 要么存在，要么不存在，没有中间状态。

- user113716

0

这是我实现的方法：

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

- yPhil

0

我会使用一个伪装的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>

- Chandu

0

可能实现这个的方法是通过onclick添加一个带有背景图像的新类。然后对其进行动画处理？或者淡出图像以显示新图像？

- diagonalbatman

我在iPhone上，所以很难。但这里的一些答案可能会对你有所帮助。 - diagonalbatman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcus Whybrow · Accepted Answer

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

这将需要一个 div，在页面上其他所有元素的后面，宽度与 body 相同。

<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上方的第二个背景div，然后将其淡入，这样可以获得更多的交叉效果。