18

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

bpeterson76
  • 12,918
  • 5
  • 49
  • 82
getaway
  • 8,792
  • 22
  • 64
  • 94

6 Answers6

47

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.

Marcus Whybrow
  • 19,578
  • 9
  • 70
  • 90
  • 1
    This would work, except that it would animate the opacity of all the content of `body` as well. I'm not sure that's what OP is after. – user113716 Jan 07 '11 at 22:56
  • @patrick of course, well there is no way I know of (without a plugin) to animate the background opacity, so maybe some extra HTML is required to get this effect? – Marcus Whybrow Jan 07 '11 at 22:59
  • @Marcus: Yes, you're right, it would require some extra HTML, like an element positioned at a z-index lower than the rest of the content and stretched out to the full width/height of the body. EDIT: I see you already updated. Nice solution. +1 – user113716 Jan 07 '11 at 23:05
  • `.css({'background-image': 'url(img/'result.bgimage')'})` how can i put this callback data in the url – getaway Jan 07 '11 at 23:16
  • @getaway I am not sure what you mean exactly. You can do `'background-image': 'url(img/result.bgimage)'` – Marcus Whybrow Jan 07 '11 at 23:18
  • +1 for providing a valid workaround instead of saying that animate() doesn't traditionally work with images (like the answers to similar questions). Has potential to help many programmers. – EnKrypt Jan 08 '14 at 17:20
1

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/

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
1

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

user113716
  • 318,772
  • 63
  • 451
  • 440
0

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)
    });    
});
yPhil
  • 8,049
  • 4
  • 57
  • 83
0

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?

diagonalbatman
  • 17,340
  • 3
  • 31
  • 31
  • http://stackoverflow.com/questions/253689/switching-div-background-image-with-jquery I'm on the iPhone so it's difficult. But some of the answers here may help you. – diagonalbatman Jan 07 '11 at 22:56
0

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>
Chandu
  • 81,493
  • 19
  • 133
  • 134