自動化對夫婦項目的延遲效果

Question

我有一個HTML代碼：

<div id="buttons"> 
    <a id="b1" href="#"><img src="http://content.captive-portal.com/campaigns/redbull/_images/b6.jpg" /></a> 
    <a id="b2" href="#"><img src="http://content.captive-portal.com/campaigns/redbull/_images/b6.jpg" /></a> 
    <a id="b3" href="#"><img src="http://content.captive-portal.com/campaigns/redbull/_images/b6.jpg" /></a> 
    <a id="b5" href="#"><img src="http://content.captive-portal.com/campaigns/redbull/_images/b6.jpg" /></a> 
    <a id="b6" href="#"><img src="http://content.captive-portal.com/campaigns/redbull/_images/b6.jpg" /></a> 
    <a id="b7" href="#"><img src="http://content.captive-portal.com/campaigns/redbull/_images/b6.jpg" /></a> 
    <a id="b8" href="#"><img src="http://content.captive-portal.com/campaigns/redbull/_images/b6.jpg" /></a> 
</div> 

和jQuery這樣一個位置：

$('#b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9').hide(); 

    setTimeout(function() { 
     $('#b1').fadeIn(500) 
    }, 600); 

    setTimeout(function() { 
     $('#b2').fadeIn(500) 
    }, 700); 

    setTimeout(function() { 
     $('#b3').fadeIn(500) 
    }, 800); 

    setTimeout(function() { 
     $('#b4').fadeIn(500) 
    }, 900); 

    setTimeout(function() { 
     $('#b5').fadeIn(500) 
    }, 1000); 

    setTimeout(function() { 
     $('#b6').fadeIn(500) 
    }, 1100); 

    setTimeout(function() { 
     $('#b7').fadeIn(500) 
    }, 1200); 

    setTimeout(function() { 
     $('#b8').fadeIn(500) 
    }, 1300); 

我如何可以自動爲延遲'按鈕'div中的所有項目，因此每一個下一個都會延遲顯示，但是一個接一個？因此，不要爲每個單獨的項目編寫setTimeout函數，而只需執行一次，所以如果我再添加100個項目，它仍然可以工作。 的例子是在這裏：jsFiddle

Answer 1

你可以這樣做：

$('[id^=b]').hide(); 
for (var i=1; i<9; i++) { 
    (function(i){ 
    setTimeout(function() { 
     $('#b'+i).fadeIn(500); 
    }, 500+100*i); 
    })(i); 
} 

Demonstration

請注意，你不已經做給一個ID，每個a元素，而你不知道不得不在js中設置限制：你可以使用一個簡單的類（<a class=au...）並執行此操作：

$('.au').hide().each(function(i){ 
    (function(e, i){ 
    setTimeout(function() { 
     e.fadeIn(500); 
    }, 500+100*i); 
    })($(this), i); 
}); 

Demonstration