可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

回答1:

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.

回答2:

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/

回答3:

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

回答4:

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?

回答5:

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>

回答6:

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