$。每個函數無法正常工作

Question

最終，我試圖創建一個定時幻燈片播放，以淡入淡出圖像。 我不明白的是為什么$ .each函數確實完成了數組每個索引的循環，而只循環了最后一個圖像7次。

這是我的代碼......

<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>

同樣，最終發生的是最后一張圖像消失前消失了7次。 在此先感謝大家。

Answer 1

那是因為您的循環不等待動畫完成。 它將所有動畫命令一個接一個地排在隊列中。 因此最好提供一個回調，以檢查動畫何時完成，然后更改圖像（通過繼續循環）。
否則，您一定會喜歡Thilo的建議

Answer 2

我認為您的問題是，在fadeIn和fadeOut在執行任務時，JavaScript執行不會暫停。

您的each通話都這樣做：

1. 將#slide的HTML設置為image1 。
2. 隱藏#slide 。
3. 開始在#slide逐漸#slide 。
4. 立即將#slide的HTML #slide為image2 （因為它不等待fadeIn完成），覆蓋image1 。
5. 再次在#slide開始淡入。

等等。

為了獲得所需的結果，您將需要一個遞歸函數（即調用自身的函數）而不是each調用。 該函數需要將回調函數傳遞給fadeIn和fadeOut －當fadeIn和fadeOut完成執行時，將調用這些函數。

例如

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);

Answer 3

您將$（'＃slide'）html設置了8次，每次都重寫它。 可能您打算將每個圖像附加到圖像上？

$('#slide').append( $(value) );

另外，您在#slide上調用hide（）8次。 這是你打算的嗎？

編輯：未經測試，但讓您了解如何使用回調

var imgArray = new Array(...)

var doAnimate = function(key){
   if(!value = imgArray[key]) return;
   $('#slide').html(value);
   $('#slide').hide().fadeIn('slow').fadeOut('slow', function(){
       doAnimate(key++);
   });
}

doAnimate(0);

Answer 4

異步執行的魔力。

事件的時間順序：

    $('#slide').html(image1);
    $('#slide').hide();
    #   fadeIn('slow').fadeOut('slow'); will happen some time later
    $('#slide').html(image2);
    $('#slide').hide();
    #   fadeIn('slow').fadeOut('slow'); will happen some time later
    $('#slide').html(image3);
    $('#slide').hide();
    #   fadeIn('slow').fadeOut('slow'); will happen some time later

循環將進入第二（和第三次，依此類推）迭代，重置圖像，直到最后一個動畫為止，直到第一個動畫完成。

Answer 5

問題是動畫是異步執行的。 在代碼中執行命令的順序為：

1. 將$('#slide').html為第一張圖片。
2. 要求jQuery啟動對象的動畫。 動畫尚未開始。
3. 將$('#slide').html為第二張圖片。
4. 要求另一個動畫。
5. ...
6. 上次要求動畫。
7. 您的功能已完成。 瀏覽器開始重新繪制頁面並觸發超時事件。 您的容器是隱藏的，其html指向最后一個圖像。
8. jQuery為您的容器設置動畫。

僅在動畫結束后才需要更改容器的html。 這是一個例子：

$(document).ready(function(){
  //populate imageArray 
  function animate_one(index) {
    if (index >= imageArray.length) return;
    $('#slide').html(imageArray[index]);
    $('#slide').hide().fadeIn('slow').fadeOut('slow', function() {
      animate_one(index+1);
    });
  }
  animate_one(0);
});

小提琴

Answer 6

一種方法（具有很好的淡入淡出效果）：

jsBin演示

把一個圖像的DIV里面，不僅僅是環陣列前面加上一個新的形象進入DIV。 使用:last選擇器淡出舊圖像（並刪除）。

var images = ['image1.jpg','image2.jpg','image3.jpg'];       // your images

var c = 0;                                                   // set the first image
$('#slide').prepend( '<img src="'+ images[c] +'" />' );      // prepend one

function loop(){ 
    $('#slide').prepend( '<img src="'+ images[c++ % images.length] +'" />' );    
       $('#slide img:last').delay(1000).fadeTo(700,0,function(){
            $(this).remove();                                // remove last one
            loop();
       });  
}
loop();

在css中，確保圖像絕對定位。