Question

所以我知道有很多这样的问题，但我认为这有点独特......这就是我的代码首先......

<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

立即下拉。我希望每个“信息框”中的每一个都逐一下降。从第一个信息框开始，一个两个三个，然后是下一个信息框，一个是两个三个，然后是下一个。所以它逐个打开，然后逐个打开。

Answer 1

如果您使用each方法，则可以延迟滑动所需的时间：

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

关于完整事件链接的这个应用的好处是你可以通过增加延迟或缩短延迟来错开它们。如果你缩短它，它们按顺序下降，但不要等到前一个完全滑动才能开始滑动。尝试播放延迟，直到获得所需的效果。

示例小提琴：http://jsfiddle.net/MKKbj/

Answer 2

使用递归：

slideIt(0);

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

DEMO：http://jsfiddle.net/Yjnny/

Answer 3

执行此操作的一种方法是在递归函数中使用每个幻灯片的回调。

创建一个向下滑动的功能：

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 ); } );

一次滑下一个

3 个答案: