How do I create a fade in effect on a rotating background image using Jquery

Question

I'm currently using a small jquery script to rotate through background images on a portfolio site I''m creating for a friend's portfolio site here's the code:

  counter = 1; 
    num_images = 9;
    dir = "IMAGE DIRECTORY URL";

    function rotateHeader() {


 var background_img = 'url(' + dir + '/image' + counter + '.gif)';

 jQuery('.category').css('background-image', background_img);  
 counter++; if (counter > num_images) counter = 1;

    }
    setInterval( "rotateHeader()", 5000 );

You can see it working here:

www.iamanatom.com/site/the-good

What I want to do is have the images and or colors fade in and out. I think I'll have to preload the images to do this and then add some sort of fade property when the pictures are loading. How do I do this?

Answer 1

Something like this ought to do it

var counter = 1, 
    num_images = 9,
    dir = "IMAGE DIRECTORY URL";

function rotateHeader() {

    var background_img = 'url(' + dir + '/image' + counter + '.gif)';

    jQuery('.category').fadeOut(function() {
        jQuery(this).css('background-image', background_img).fadeIn();
    });  
    counter++; if (counter > num_images) counter = 1;
}
setInterval(rotateHeader, 5000 );

First we fade out the current background image, then in the callback function, change the background image and then fade it back in. You might want to play with the fadeOut() and fadeIn() intervals to get the effect you want. I've also changed the setInterval() to use the function name as opposed to a string to evaluate.

Answer 2

Can you please provide a step by step tutorial for this? I am using WordPress and I would like fading / rotating background images.