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

我还在setTimeout();调用中尝试了.each()，但这也没有产生预期的结果，而且我对现有的每个/每个迭代问题的回顾都没有让我更进一步我回顾了。

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（）迭代 - 意外动画结果

2 个答案: