Question

I have to change background images at a specific interval. There will be around 4-5 images in the background that will be changed. Also i want to have nice transition effect wherein one image starts fading and even before it has completely faded the next image starts fading in.

For the desired functionality please have a look at http://www.virgin-atlantic.com/gb/en.html

the structure is i have is as follows:

<div class="items">
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_01.jpg" alt="Get the most out of your Trade In">
            </div>
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_02.jpg" alt="Get the most out of your Trade In">
            </div>
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_03.jpg" alt="Get the most out of your Trade In">
            </div>
            <div id="backWallpaper" style="left: 0px; top: 0px; overflow: hidden; position: absolute;
                z-index: -1; margin: 0px; padding: 0px; display: none;" class="carousel_item">
                <img class="bg_slider" src="images/bg_img_04.jpg" alt="Get the most out of your Trade In">
            </div>
        </div>

and the code to swap the images is as follows :

$(window).load(function () {
            //load first background after page loads.
            $('.carousel_item').eq(0).fadeIn(2000);
            setTimeout(changeBackground, 4000);
        });

        //indexers
        var fadeOut = 0;
        var fadeIn = 1;

        function changeBackground() {
            //fadeOut the first image
            $('.carousel_item').eq(fadeOut).fadeOut(1000);
            //fadeIn the second image
            $('.carousel_item').eq(fadeIn).fadeIn(1500);
            //increament indexers
            fadeOut += 1;
            fadeIn += 1;
            //if indexer becomes greater than 3 reset it to 0
            if (fadeOut > 3)
                fadeOut = 0;
            if (fadeIn > 3)
                fadeIn = 0;

            //again set the timeout to loop.
            setTimeout(changeBackground, 4000);
        }

now the problem is the code is behaving strangely. up to the last image i.e (index:3) the images show fine. and after that the last image seems stuck. its as if fadeOut does not work for the last index for some reason.

Kindly advise as to what might be wrong in this code setup.

Answer 1

To further test this problem I moved the loads of style on carousel_item div to a css class and noticed that fadeOut was not removing the display:block property on the divs.

fadeOut seems to have an issue with elements having 0 width and 0 height so when i removed the postion:absolute from the carousel_item divs they grew to the size of the contained image and voila the problems was solved.

to further read about the issue pleas check the accepted answer on this link
jQuery fadeOut is not changing display property

thanks to simon and jfrej for their help and jsFiddle setup.