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

Automation of delay effect on couple of items in one container

本文关键字：延迟 自动化 项目 一个 两个      更新时间：2023-09-26

我有一个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);

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

您可以这样做：

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

演示

请注意，您不需要为每个a元素指定id，也不必在js中设置限制：您可以使用一个简单的类（<a class=au...）来执行以下操作：

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

演示

相关文章：