Change javascript to fade in over the top of each other instead of fadein/fadeout?

Question

Below is the javascript in place for a set of images to fade in and out. It works fine and well, but I now want the images to fade in over the top of each-other instead and after playing around I am having some troubles with it.

Javascript:

<script type="text/javascript">
    $(document).ready(function () {

        var $backgroundimages = ['http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-test.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/qanda-front.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-page-slide.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/TCE-New.jpg'];
        var $backgroundcount = 0;

        function fade($ele) {
            $ele.css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');
            $backgroundcount++;
            $ele.fadeIn(1000).delay(5000).fadeOut(1000, function () {
                if ($backgroundcount >= $backgroundimages.length) {
                    $backgroundcount = 0;
                };
                fade($ele);
            });
        };

        fade($('#stretchParent  .HomeImage').first());
    });
</script>

CSS:

div#stretchParent{width:100%;min-width:960px;height:275px;}
div.HomeImage{min-width:960px;width:100%;background-position:center !important;background-repeat:no-repeat !important;background-size:cover !important;min-height:275px;position:absolute;top:0;left:0px;margin:125px -0px 0px 0px;display:none;}

For a working version of the above slider, you can also see: http://universitycompare.com

Answer 1

I think some of these other solutions are over thinking it. You were already so close. Instead of fading in and out the one image, you need to fade in a new image over top each time. I tweeked your code slightly below.

Here is the jsFiddle: http://jsfiddle.net/Q5YYG/

$(document).ready(function () {

    var $backgroundimages = ['http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-test.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/qanda-front.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/home-page-slide.jpg', 'http://www.universitycompare.com/wp-content/themes/blue-and-grey/images/TCE-New.jpg'];
    var $backgroundcount = 0;

    function fade($ele) {

        // Determine which image is next
        $backgroundcount++;
        if ($backgroundcount >= $backgroundimages.length) {
            $backgroundcount = 0;
        };

        // Put a new hidden image in front of the original image
        var $new_element = $ele.clone();
        $ele.after($new_element);
        $new_element.hide().css('background-image', 'url('+$backgroundimages[$backgroundcount]+')');

        // Fade the new image in
        $new_element.delay(5000).fadeIn(1000, function() {

            // After the new image is visible, remove the old image.
            $ele.remove();

            // Do the same thing over again
            fade($new_element);
        });
    };

   fade($('#stretchParent .HomeImage').first());
});