Jquery Fade Effect

[a4udi]

Hi,

I'm trying to do a simple image cycle but I want to add either a fade or slide effect it. I've got a <div id#home-image-container"> which is basically the middle section of my page with a background image and it cycles through 3 different backgrounds.

Here is the code I'm using:

Javascript

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
jQuery( function( $ ) {
    var images = [ "images/background-02.jpg", "images/background-03.jpg" ];
    var currentImage = 0;

    function changeBackground() {
        $( '#home-image-container' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
        if ( currentImage >= images.length - 1 ) {
            currentImage -= images.length;
        }
    }

    setInterval( changeBackground, 5000 );  
});
</script>

And the DIV

<div id="home-image-container" style="width:100%; height:690px; background-image:url(images/background-01.jpg); background-position:center; background-repeat:no-repeat; overflow:hidden;">

It works fine right now, but it just changes the background after a few seconds.. I want to add a fade or slide transition to the 3 backgrounds.

[SB65]

You can't fade the background-image, unless you fade the whole div with it. Better to use images and then fade them. Have a look at this for an approach to crossfading the images.

[a4udi]

Perfect, I went the image route and have it working! Thanks.