Jquery fadeIn not appearing to happen

Question

I have made this minimal test jsfiddle to show images and navigate with thumbnails, next and previous and also run as a slideshow.

It seems to be working OK, except that I can not get the current displayed image to fadeOut prior to the fadeIn of the next image.

Initially all the images were placed in a stack in the #holder DIV and then FadeIn and FadeOut worked as I expected, but I need to have the images in an array and load as required, because there will be several different values, associated with each image.

I probably have made some fundamental mistake or I do not understand how FadeIn and FadeOut properly work, as I am not an expert in javascript and jquery and I just get by, by looking at examples on here and similar sites.

I suspect I may need to somehow force a delay before loading the next image, but I can not work out how to do that.

Thanks

<style type='text/css'>
    #holder { position: absolute; top: 100px; background-color:#CCCCCC;
    width: 300px; height: 200px;
}
.slides { position: relative; top: 0px;
    display: none;
}
#thumbs li
{
display: inline;
list-style-type: none;
padding-right: 6px;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
// define Global Vars

var timerON = null;

var files = [
    ["http://dummyimage.com/300x200/000/fff&text=Array-01", "http://dummyimage.com/40x40/000/fff&text=01","Title-01"] ,
    ["http://dummyimage.com/300x200/000/fff&text=Array-02", "http://dummyimage.com/40x40/000/fff&text=02","Title-02"] ,          
    ["http://dummyimage.com/300x200/000/fff&text=Array-03", "http://dummyimage.com/40x40/000/fff&text=03","Title-03"] ,
    ["http://dummyimage.com/300x200/000/fff&text=Array-04", "http://dummyimage.com/40x40/000/fff&text=04","Title-04"] ,          
    ["http://dummyimage.com/300x200/000/fff&text=Array-05", "http://dummyimage.com/40x40/000/fff&text=05","Title-05"] ,
    ["http://dummyimage.com/300x200/000/fff&text=Array-06", "http://dummyimage.com/40x40/000/fff&text=06","Title-06"] ,          
    ["http://dummyimage.com/300x200/000/fff&text=Array-07", "http://dummyimage.com/40x40/000/fff&text=07","Title-07"]
    ]
var numImages = files.length;

// initial routines
showImage(1);
buildThumbs();

function showImage(num) {
    //$('#holder img').fadeOut();
    if ( $('#holder img').length > 0 ) { // fadeout existing
        $("#holder img").fadeOut(700);
        //alert("Faded OUT");

    }
    $("#holder").html('<img id="' + num + '" src="' + files[num-1][0] + '" style="display:none;"' + '" />');
    $("#holder img").fadeIn(700);
    //alert("Faded IN");

}

function buildThumbs() {
    var thumbs = "";
    for (cnt=0; cnt<files.length; cnt++) {
        thumbs += '<li><a href="#" id="' + (cnt + 1) + '"><img src="' + files[cnt][1] + '" /></li>';
    }
    $('#thumbs').html(thumbs);
}

// Initialise routines for acting on click events
$(document).ready(function() {


    $('#prev').click( function () {
        var currImage = parseInt($('#holder img:visible').attr("id"));
        if (currImage == 1) {
             // at first position   
        }
        else {
                showImage(currImage-1);        }
    });

    $('#next').click( function () {
        var currImage = parseInt($('#holder img:visible').attr("id"));
        if (currImage == numImages) {
            // at last position
        }
        else {
            showImage(currImage+1);
        }
    });


    $('#thumbs a').click( function () {
        var selImage = parseInt($(this).attr('id'));
        var currImage = parseInt($('#holder img:visible').attr("id"));
        showImage(selImage);

    });

    $('#slideShowBtn').click( function () {
       slideShowCheck();

    });

});


function slideShowCheck() {
    if(timerON != null) {
        clearTimeout(timerON);
        timerON = null;
        $('#slideShowBtn').text('Play Slideshow');
   } else {
        $('#slideShowBtn').text('Stop Slideshow');
        slideShow();
    }
}

function slideShow() {

        var nextImage = 0;
        var currImage = parseInt($('#holder img:visible').attr("id"));
        if (currImage == numImages) {
            nextImage = 1;
        } else {
            nextImage = currImage + 1;                     
        }
        showImage(nextImage);
        timerON = setTimeout(slideShow, 3000);

}
});//]]>  

</script>


</head>
<body>
  <p>
    <button id="prev">&laquo; Prev</button>
    <button id="next">Next &raquo;</button>
</p>
<ul id="thumbs">

</ul>
<p>
    <button id="slideShowBtn">Play Slideshow</button>
</p>
<div id="holder">
</div>
<div style="clear:both;"></div>

<ul id="thumbs2">

</ul>

</body>


</html>

Answer 1

Callbacks, callbacks, callbacks.

JS does alot of things async, so you will need to make use of a callback on that fadein.

$(ITEM1).fadeOut("fast", function() {
    alert("all the way faded out");
    $(ITEM2).fadeIn("fast");
});

Here's your fixed fiddle.