How do I change the background image using jQuery animation?

by

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.

More Related Contents:

  1. how to serialize all img tags with Jquery
  2. jQuery callback on image load (even when the image is cached)
  3. How can I create a “Please Wait, Loading…” animation using jQuery?
  4. How to Use slideDown (or show) function on a table row?
  5. How can I animate multiple elements sequentially using jQuery?
  6. jQuery loading images with complete callback
  7. jQuery using append with effects
  8. How do you make an element “flash” in jQuery
  9. jquery change background color user scroll
  10. How to fade changing background image
  11. jQuery: Check if image exists
  12. Jquery resizing image
  13. Chaining jQuery animations that affect different elements
  14. How can I execute multiple, simultaneous jquery effects?
  15. jquery callback after all images in dom are loaded?
  16. How do I get actual image width and height using jQuery?
  17. typing animated text
  18. How can I create a “Please Wait, Loading…” animation using jQuery?
  19. jQuery Animation – Smooth Size Transition
  20. How to cancel a jquery.load()?
  21. Trying to make multiple background images cycle through a slideshow with CSS and JQUERY
  22. Display PNG image as response to jQuery AJAX request
  23. jquery html() callback function
  24. jQuery toggle animation
  25. jQuery animate height
  26. CSS3 equivalent to jQuery slideUp and slideDown?
  27. jQuery animate() and browser performance
  28. How to delay jquery animation?
  29. change img src on click
  30. What is alternative to use after jQuery 1.9 removed .toggle(function,function)?

Leave a Comment