Background image slideshow transition issue

Question

I need help in improving the script for my background image slideshow.

I managed to create a fade in effect with .fadeIn(600) JS function. But, I want the images to switch between each other, not between white background.

In other words, I need to smooth up the transition between images.

Note that each image has a caption, but I'm OK with it as it is. I don't need any transitions for text.

JSFiddle http://jsfiddle.net/newsha/B4TXj/

    var timer;
$(document).ready(function () {
    // background image on load
    var numberImages = 4
    var images = [];
    for (var i = 1; i <= numberImages; i++) {
        images.push(i);
    }
    var imgValue = 1
    $('.backgroundImage').addClass('bg' + imgValue + '');

    // Switch background image - forwards
    $('.imgSwitchRight').click(function () {
        $('.backgroundImage').each(function (e) {
            $(this).removeClass('bg1 bg2 bg3 bg4').fadeOut(0);
        });
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.imgSwitchRight').click();
        }, 8000);
        if (imgValue < numberImages) {
            imgValue++
        } else {
            imgValue = 1
        }

        $('.backgroundImage').addClass('bg' + imgValue + '').fadeIn(600);

    });
    clearTimeout(timer);
    timer = setTimeout(function () {
        $('.imgSwitchRight').click();
    }, 8000);

    // Switch background - backwards
    $('.imgSwitchLeft').click(function () {
        $('.backgroundImage').each(function (e) {
            $(this).removeClass('bg1 bg2 bg3 bg4').fadeOut(0);
        });
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.imgSwitchRight').click();
        }, 8000);

        if (imgValue > 1) {
            imgValue--
        } else {
            imgValue = numberImages
        }
        $('.backgroundImage').addClass('bg' + imgValue + '').fadeIn(600);

    });
    clearTimeout(timer);
    timer = setTimeout(function () {
        $('.imgSwitchRight').click();
    }, 8000);
});

Answer 1

I just used a secound div aas a swapping plane. the visible div is now fading out while the invisible one is fading in. after that the roles are switched and it goes on and on.. one problem still remains. if switching the images too fast the classes "stack" because the animation of the fading div is interrupted and the class will not be removed.. Problem solved..

var timer;
$(document).ready(function () {
    // background image on load
    var numberImages = 5,
        easetime = 2000,
        changetimeout = 5000;

    var images = [];
    for (var i = 1; i <= numberImages; i++) {
        images.push(i);
    }
    var imgValue = 1;
    var visibleBackground = $('.backgroundImage.a');
    var invisibleBackground = $('.backgroundImage.b');
    $('.backgroundImage').hide();
    visibleBackground.addClass('bg' + imgValue + '').show();

    var dir = 1;
    function changeBG(){
        oldValue = imgValue;
        imgValue = (imgValue+dir)%numberImages;
        $('.rotating-text'+imgValue).fadeIn(easetime);
        $('.rotating-text'+oldValue).fadeOut(easetime);
        clearTimeout(timer);
        timer = setTimeout(function () {
            changeBG();
        }, changetimeout);
        visibleBackground.fadeOut(easetime);
        setTimeout(function(){
            var tmpBackground = visibleBackground, tmpVal = oldValue;
            return function(){
                tmpBackground.removeClass('bg' + tmpVal)
            }
        }(), easetime);
        invisibleBackground.addClass('bg' + imgValue + '').fadeIn(easetime);

        var swap = visibleBackground;
        visibleBackground = invisibleBackground;
        invisibleBackground = swap;
    }

    // Switch background image - forwards
    $('.imgSwitchRight').click(function () {
        dir = 1;
        changeBG()
    });

    // Switch background - backwards
    $('.imgSwitchLeft').click(function () {
        dir = -1;
        changeBG()
    });
    timer = setTimeout(function () {
        changeBG();
    }, changetimeout);
});

http://jsfiddle.net/B4TXj/11/