一次滑下一个
一次滑下一个
提问于 2013-01-18 08:17:37
所以我知道有很多这样的问题，但我认为这有点独特……下面是我的代码的第一部分..
<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
我想让每个" infobox“中的每一个都一个一个地下拉。从第一个infobox开始，1，2，3，然后是下一个，1，2，3，然后是下一个。所以它一个接一个地打开，然后一个接一个地打开。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-01-18 08:27:21
使用递归性：
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/
Stack Overflow用户
发布于 2013-01-18 08:23:16
如果使用each方法，则可以延迟向下滑动所需的时间：
var i = 0;
$(".infobox_alert").each(function () {
$(this).delay(1000*i).slideDown(1000);
i++;
});与完整事件的链接相比，这样做的好处是你可以通过增加延迟或缩短延迟来错开它们。如果你缩短了它，它们会按顺序下降，但不要等到前一个完全滑动完成后才开始滑动。尝试使用延迟，直到您得到想要的效果。
示例小提琴：http://jsfiddle.net/MKKbj/
Stack Overflow用户
发布于 2013-01-18 08:23:21
要做到这一点，一种方法是在递归函数中使用每个幻灯片的回调。
创建一个向下滑动的函数：
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 ); } );页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14390506
复制相关文章
相似问题
腾讯云开发者
