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

【问题标题】：JQuery each() iteration - unexpected animation resultsJQuery each() 迭代 - 意外的动画结果
【发布时间】：2016-03-24 03:07:05
【问题描述】：

我有一系列 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 每次/迭代问题的审查并没有让我对我审查的问题有任何进一步的了解。

【问题讨论】：

标签： jquery iteration each show

【解决方案1】：

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

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

在.each 中，您可以在处理函数中提供可选的index 参数，该参数将为您提供所在元素的索引。（从0开始）

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

【讨论】：

太棒了，我会接受的——你能指出在这种情况下解释（索引）变量角色的 JQuery DOCS 位置吗？

【解决方案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() );*/
  });
});

【讨论】：