Question

Eventually I’m trying to create a timed slide show that fades images in and out. What I can’t figure out is why my $.each function does complete the loop for each index of the array and instead only loops the last image seven times.

Here is my code…

<script>
$(document).ready(function(){
    var image1 = "<img width='600' height='400' src='images/image1.jpg' />";
    var image2 = "<img width='600' height='400' src='images/image2.jpg' />";
    var image3 = "<img width='600' height='400' src='images/image3.jpg' />";
    var image4 = "<img width='600' height='400' src='images/image4.jpg' />";
    var image5 = "<img width='600' height='400' src='images/image5.jpg' />";
    var image6 = "<img width='600' height='400' src='images/image6.jpg' />";
    var image7 = "<img width='600' height='400' src='images/image7.jpg' />";
    var image8 = "<img width='600' height='400' src='images/image8.jpg' />";

    var imageArray = new Array(image1, image2, image3, image4, image5, image6, image7, image8);
    $.each(imageArray, function(key, value){
        $('#slide').html(value);
        $('#slide').hide().fadeIn('slow').fadeOut('slow');
    });
});
</script>

Again, what ends up happening is that the last image fades in and out 7 times before disappearing. Thanks in advance guys.

Answer 1

I think your issue is that JavaScript execution doesn’t pause whilst fadeIn and fadeOut are doing their thing.

Your each call does this:

1. Sets the HTML of #slide to image1.
2. Hides #slide.
3. Starts fading in #slide.
4. Immediately sets the HTML of #slide to image2 (because it doesn’t wait for fadeIn to finish), overwriting image1.
5. Starts fading in #slide again.

And so on.

In order to get the outcome you want, you’ll need a recursive function (i.e. a function that calls itself) instead of your each call. This function will need to pass callback functions to fadeIn and fadeOut — these functions will get called when fadeIn and fadeOut have finished executing.

E.g.

function fadeImagesInAndOut(imageArray, imageIndex) {
    $('#slide').html( imageArray(imageIndex) );

    $('#slide').hide().fadeIn('slow', function () {

        $('#slide').fadeOut('slow', function () {

            if (imageIndex < imageArray.length) {
                fadeImagesInAndOut(imageArray, imageIndex + 1);
            }
        });
    });
}

fadeImagesInAndOut(imageArray, 0);