1

私はこのような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 関数を記述する代わりに、1 回だけ実行すれば、さらに 100 個のアイテムを追加しても同じように機能するでしょうか? 例はここにあります: jsFiddle

4

1 に答える 1

2

あなたはこれを行うことができます ：

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

デモンストレーション

各要素に id を指定する必要はなく、js で制限を設定する必要もないことに注意してください。単純なクラス ( ) を使用して、次のようにすることができます。a<a class=au...

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

デモンストレーション

于 2013-02-11T15:26:30.700 に答える