Javascript 一个容器中两个项目延迟效应的自动化

我有如下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>

我如何自动延迟“buttons”div中的所有项目，以便每个下一个项目都会延迟出现，但会一个接一个出现？因此，与其为每个单独的项编写setTimeout函数，不如只编写一次，这样如果我再添加100个项，它仍然可以正常工作？ 示例如下：

您可以执行以下操作：

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

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

---

谢谢，效果很好，但是有没有办法用一个简单的脚本来隐藏所有（b1、b2、b3等）按钮，而不是在这里使用以下内容：$（“#b1、#b2、#b3、#b4、#b5、#b6、#b7、#b8、#b9”）.hide（）；还有，有没有办法不使用很多项，所以如果我再添加3项，我就不需要更改jquery了？只是html？我已经定好了

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