JQuery исчезает, кажется, не произойдет

Question

Я сделал этот минимальный тест jsfiddle для показа изображений и навигации по миниатюрам, следующим и предыдущим, а также для запуска слайд-шоу.

Кажется, все работает хорошо, за исключением того, что я не могу получить текущее отображаемое изображение в fadeOut до появления fadeIn следующего изображения.

Изначально все изображения были помещены в стек в #holder DIV, а затем FadeIn и FadeOut работали, как я ожидал, но мне нужно иметь изображения в массиве и загружать их по мере необходимости, потому что будет несколько разных значений, связанных с каждым образ.

Возможно, я допустил какую-то фундаментальную ошибку, или я не понимаю, как FadeIn и FadeOut работают должным образом, так как я не являюсь экспертом в javascript и jquery, и я просто обхожусь, просматривая примеры здесь и на подобных сайтах.

Я подозреваю, что мне может потребоваться каким-то образом форсировать задержку перед загрузкой следующего изображения, но я не могу понять, как это сделать.

Спасибо

<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

Обратные вызовы, обратные вызовы, обратные вызовы.

JS делает много вещей асинхронно, поэтому вам нужно будет использовать обратный вызов для этого fadein.

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

Вот твоя фиксированная скрипка.