Smooth background image swap – jQuery Background-Image Transition Plugin

I will show you an example right now, so you know what I am talking about.

Here is a working example

What we basically do is:

1. Create an additional hidden <div> element on top ( using z-index ) of the element we want to animate
2. Load the new image in the in the cache in the background, so that the effect is smooth
3. Set the new src to the new <div> element
4. fadeIn() the new <div> element so that it creates the illusion that the background image of our initial div is smoothly changing
5. Optional step – if we need to change the image once again, go from 2 to 5 but setting the new src to our initial <div> and then using fadeOut() on the new element, so that it disappears and the new image is set as background to the old <div>. This way we won’t have an infinitive increase of the z-index and won’t actually change the z-index of the initial <div>

OK, let’s get to work, we will start with the HTML markup:

<div id=”backImage”></div>

Well, that was pretty easy: we have a simple <div> element with some demo text and just next to it we add that additional <div> which we will need for the animation.

So, here is the CSS:

#backImage {
    z-index: -2;
    height:600px;
    width:800px;
    background-image: url('path/to/initial/img');
}

We just set a height and width of the element so that we are sure the image will actually be shown. It is generally a good idea to have the z-index set to a negative number while other elements have a greater z-index value.

We will use jQuery’s Background-Image Transition Plugin for our example.

First, add jQuery and the plugin

<script lang=”Javascript” src=”path/to/jQuery.js” type=”text/javascript”> </script>
<script lang=”Javascript” src=”path/to/jQuery.bgImageTransition.js” type=”text/javascript”> </script>

Then, at the end of the document, add the following lines:

jQuery( function(){
    jQuery('#backImage').bgImageTransition( 'path/to/new/image', {
        duration: 'slow',
        easing: 'linear',
        helperElementId: 'backImage2',
        zindex: -1
        callback: function(){
           //do sth
        }
    });
});

The only mandatory argument is the path to the new image. The optional second argument is an object holding some tweaks. You can set the desired duration, easing, helperElementId ( which is generated by the plugin ), z-index of the helperElement ( by default it will take the selected element’s zindex and increment by 1 ) and a callback function in case you want to execute some functionality when the transition is over.