JQuery each() 迭代 - 意外的动画结果

Question

我有一系列的 4 div 我想从右边滑出，每个动画开始之间有大约 1 秒的延迟。我遇到的问题是我对 .each() 的使用没有产生我预期的效果。相反，容器的子 div 全部同时滑出。我使用 alert( $( this ).text()); 在 .each() 迭代内部进行测试，并获得预期的 4 个警告框（第一、第二、第三、第四）。但是将动画调用 $(this).delay(500).show("slide", { direction: "right" }, 1000); 放在 .each() 中并没有给我预期的迭代延迟。有人可以指出我这里有什么问题吗？

HTML

<div id="holder">
    <div style="display:none;">First</div>
    <div style="display:none;">Second</div>
    <div style="display:none;">Third</div>
    <div style="display:none;">Fourth</div>
</div>

Jquery

$(document).ready(function() {     
    $( "#holder > div" ).each( function(){
        $(this).delay(500).show("slide", { direction: "right" }, 1000);    
        /*$( "#holder > div" ).each( function( index, element ){
        alert( $( this ).text() );*/
    }); 
});

CSS

#holder div {
    background-color:blue;
    margin-bottom:8px;
    color:white;
    padding-left:15px;
}

FIDDLE LINK

我还在 .each() 调用中尝试了 setTimeout();，但这也没有产生预期的结果，而且我对现有 SO each/iteration 问题的审查也没有让我得到任何结果进一步了解我评论过的内容。

Answer 1

将您的 .each 循环修改成这样

$( "#holder > div" ).each( function(index){
    $(this).delay(500*index).show("slide", { direction: "right" }, 1000);
});

在 .each 中，您可以在处理程序函数中提供一个可选的 index 参数，该参数将为您提供所处元素的索引。 (从0开始)

在这种情况下，您可以使用它根据元素的索引增加延迟，使它们一个接一个地出现。

Answer 2

它以相同的延迟执行每个操作，因此每次您想执行此类操作时都会增加延迟。

var aniDelay = 1000;
$(document).ready(function() {
  $("#holder > div").each(function() {
    $(this).delay(500).show("slide", {
      direction: "right"
    }, aniDelay);
    aniDelay = aniDelay + 1000;
    /*$( "#holder > div" ).each( function( index, element ){
    alert( $( this ).text() );*/
  });
});

JQuery each() 迭代 - 意外的动画结果

JQuery each() iteration - unexpected animation results

iteration

each

jquery

show