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

时间:2011-01-07 22:43:43

标签: jquery image animation background

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

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

语法有问题!!

6 个答案:

答案 0 :(得分:47)

您可以通过将图像不透明度淡化为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来获得更多的交叉效果,然后你可以淡入。

答案 1 :(得分:1)

来自jQuery文档:

  

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

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

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

答案 4 :(得分: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>  

答案 5 :(得分: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)
    });    
});