Home/ Questions/Q 3666068
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T01:50:11+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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