How do I change the background image using jQuery

2020-01-24 09:41发布

站内问答 / jQuery
2002 6 6

I want to change the background image using slow animation, but its not working

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

Is there something wrong with the syntax!!

6条回答
啃猪蹄的小仙女
2楼-- · 2020-01-24 10:14

I would use a faux div to cover the background as a fixed element and then animate that element i.e:

<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>
查看更多
0人赞 添加讨论(0) 举报
趁早两清
3楼-- · 2020-01-24 10:15

The way to achieve this may be to onclick add a new class with the background image in. Then animate this? Or fade out the image to reveal a new one?

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
4楼-- · 2020-01-24 10:19

From the jQuery documentation:

properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)

Source: http://api.jquery.com/animate/

查看更多
0人赞 添加讨论(0) 举报
走好不送
5楼-- · 2020-01-24 10:19

Here is how I did it:

$(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)
    });    
});
查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
6楼-- · 2020-01-24 10:23

You can get a similar effect by fading the image opacity to 0, then change the background image, and finally fading the image back in again.

This will require a div, behind everything else on your page which is as wide as the body.

<body>
    <div id="bg"></div>
    ...
</body>

You can make it as wide as the page using CSS:

#bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

And then animate it's properties.

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

You could get more of a crossover effect, by having a second background div on top of this one, which you can then fade in.

查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
7楼-- · 2020-01-24 10:32

You can't animate the adding/replacing of a background image. The URL is either there or not. There's no in between state.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)