0

このような質問が複数あることは知っていますが、これは少し独特だと思います...最初の私のコードは次のとおりです..

<div class="holster_infobox_helper">

        <div id="infobox_holder">
            <div class="infobox">
                <h2><img src="<?php $ROOTPATH ?>/img/icons/color_18/access_point.png">Alerts</h2>
                <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                  <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                    <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
            </div>

            <div class="infobox">
                <h2><img src="<?php $ROOTPATH ?>/img/icons/color_18/hammer.png">Jobs</h2>
                <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
                  <p class="infobox_alert"><a href="<?php echo $ROOTPATH; ?>jobs"><img src="<?php $ROOTPATH ?>/img/icons/gray_18/hammer.png">Accepted Proposal</a></p>
            </div>
        </div>

    </div>

私は小さなスニペットを持っています、

$(".infobox_alert").delay(2500).slideDown(1000);

これにより、すべての .infobox_alert が作成されます

のドロップダウンを一気に。各「インフォボックス」から1つずつドロップダウンしたいと思います。最初のインフォボックスから始めて、ワン ツー スリー、次のインフォボックス、ワン ツー スリー、そして次のインフォボックス。そのため、ボックスごとに 1 つずつ開き、次のボックスに 1 つずつ開きます。

4

3 に答える 3

3

eachメソッドを使用すると、スライドダウンにかかる時間を遅らせることができます。

var i = 0;
$(".infobox_alert").each(function () {
  $(this).delay(1000*i).slideDown(1000);
  i++;
});

完全なイベントの連鎖に対するこのアプローチの優れた点は、遅延を追加したり、遅延を短くしたりして、それらをずらすことができることです。短くすると順番に降りてきますが、前の子が完全に滑り終わるのを待たずに滑り始めます。希望の効果が得られるまで、ディレイをいじってみてください。

フィドルの例: http://jsfiddle.net/MKKbj/

于 2013-01-18T00:23:15.567 に答える
1

再帰性を使用する:

slideIt(0);

function slideIt(i){
   var el =$(".infobox_alert:eq("+i+")");
   if(el == undefined) 
       return;
   el.slideDown(1000);
   setTimeout(function(){slideIt(++i)}, 1000);
}

デモ: http://jsfiddle.net/Yjnny/

于 2013-01-18T00:27:20.883 に答える
0

これを行う 1 つの方法は、再帰関数で各スライド ダウンのコールバックを使用することです。

次の関数を下にスライドする関数を作成します。

var slideDownNext = function(element){
    element.next().slideDown( function(){ slideDownNext($(this)) } );
}

次に、それを最初の要素に添付します。

$(".infobox_alert:first").slideDown( function(){ slideDownNext($(this)) } );

他の回答で述べたように、タイムアウト/遅延を使用してスライドをずらすことができますが、前のものが完了する前に次のものが開かないことを保証するものではありません。アニメーションの時間を遅延と同じに設定しても、前のアニメーションが終了する前に次のアニメーションが開始される可能性があります。

更新: 質問の html を十分に見ておらず、すべての要素が兄弟であると想定していました。そうではないので、このような解決策はうまくいくはずです:

var alerts = $('.infobox_alert')
function slideNext(i){
    alerts.eq(i).slideDown( function(){ slideNext(++i); } );
}
alerts.eq(0).slideDown( function(){ slideNext( ++i ); } );
于 2013-01-18T00:23:20.770 に答える