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

的立即下降。我想让每个“信息框”中的每一个都一个一个地下拉。从第一个信息框开始，一二三，然后是下一个信息框，一二三，然后是下一个。所以它会一个一个地打开，然后一个一个地打开。

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

一种方法是在递归函数中使用每个向下滑动的回调。

创建一个向下滑动的函数：

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 回答