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

get*_*way 18 jquery animation background image

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

 $('body').stop().animate({background:'url(1.jpg)'},'slow');
Run Code Online (Sandbox Code Playgroud)

语法有问题!!

Mar*_*row 47

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

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

<body>
    <div id="bg"></div>
    ...
</body>
Run Code Online (Sandbox Code Playgroud)

您可以使用CSS将其设置为与页面一样宽:

#bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
Run Code Online (Sandbox Code Playgroud)

然后为它的属性设置动画.

$('#bg')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': 'url(1.jpg)'})
            .animate({opacity: 1});
    });
Run Code Online (Sandbox Code Playgroud)

你可以通过在这一个上面加上第二个背景div来获得更多的交叉效果,然后你可以淡入其中.