以一定的時間間隔逐個隱藏圖像的集合

Question

我有一個div塊中的圖像集合

我想隱藏他們一段時間的時間間隔。

我試過這個腳本。

$(document).ready(function() { 
    delayInSeconds = 1; 
    i = 0; 
    setInterval(function() { 
     while (i < 10) { 
      $(".images").eq(i).hide(); 
      i++; 
     } 
    }, delayInSeconds * 50); 
}); 

Answer 1

那是因爲i的值是10的第一次迭代甚至開始時間。

一個解決這個問題的方法是：

... 
function hideOne(i) { 
    $(".images").eq(i).hide(); 
    if($(".images").eq(i+1).length > 0) { // or change to if(i+1 < 10) if you're sure 
     setTimeout(function() { 
      hideOne(i+1); 
     }, delayInSeconds * 1000); // given the variable name, the multiplier should be 1000, i believe 
    } 
} 

hideOne(0); // start it 
... 

Answer 2

$(document).ready(function() { 
$(".images").each(function(){ 
    setTimeOut($(this).hide(),300); 
}); 
});  

這應該這樣做。 希望這會幫助你

Answer 3

這將做到這一點。它利用:visible選擇器丟棄隱藏的圖像，以及:eq(0)選擇器從匹配集中獲取單個元素。

Demo

var delayInSeconds = 1; 

function hide(){ 
    setTimeout(function(){ 
     var images = $('.images:visible:eq(0)'); 
     if(images.length == 1){ 
      images.hide(); 
      hide(); 
     } 

    }, 1000 * delayInSeconds); 
} 

$(document).ready(function(){ 
    hide(); 
});