在for Jquery/Javascript循环中设置延迟

这里有点困惑，不确定是不是周一早上的忧郁！它只是不起作用：(

我想实现的是：

以设置为rel的间隔淡入每个元素

我的HTML代码是（这些都是用CSS隐藏的）

0

一,

二,

还有我的javascript/jquery

function fadeInrpItem (rpItem, rpDelayTime) {
    rpItem.stop().animate({"opacity" : 1}, 400);
    setInterval(rpDelayTime);
};

function startTheRp () {
        for(var index=0; index < $('.rpItem').length; index++) {

            var rpItem = $('.rpItem').eq(index);

            //Pull in our delay attribute from the div
            var rpDelayTime = rpItem.attr('rel');

            fadeInrpItem(rpItem, rpDelayTime);          
        }
};

$(document).ready(function(){
    startTheRp();
});

函数fadeInrpItem（rpItem，rpDelayTime）{
rpItem.stop（）.animate（{“不透明”：1}，400）；
设置间隔（rpDelayTime）；
};
函数startTheRp（）{
对于（var index=0；index<$（'.rpItem'）。长度；index++）{
var rpItem=$（'.rpItem'）.eq（索引）；
//从div中提取延迟属性
var rpDelayTime=rpItem.attr（'rel'）；
fadeInrpItem（rpItem，rpDelayTime）；
}
};
$（文档）.ready（函数（）{
startTheRp（）；
});

设置间隔功能的使用方法如下

function fadeInrpItem(rpItem, rpDelayTime) {
    setInterval(rpDelayTime) {
        rpItem.stop().animate({
            "opacity": 1
        }, 400);
    }
};

试试这个：

$(document).ready(function(){
    $('.rpItem').each(function(){
        $(this).animate({"opacity" : 1}, $(this).attr('rel'));
    });
});

---

这将适用于

可见性：hidden

原始代码中的问题是使用setInterval进行计时，因为您没有向其传递函数，因此当前它什么都不做。此外，原始代码使整个问题变得复杂

我想这是你想要的

delayTime = 0 // initialise delayTime
$('.rpItem') // select all the items we want to work with
    .css({opacity:0}) // for testing - can be commented out
    .each(function(){ // loop through each item
      $this = $(this) // cahce reference of $(this) to improve performance
      delayTime = delayTime + parseInt($this.attr('rel')) // increment delayTime
      $this.data('delay',delayTime) // set current delayTime to item's data (so that asynchronous calls do not use global/updated version when they are called)
      $this // get reference to item as jQuery object
        .delay( $this.data('delay') ) // set the delay as the item's rel attribute
        .animate({"opacity" : 1}, 400) // fade in the item with duration 400
    })

---

它将选择所有

.rpItem

（然后将不透明度设置为0以进行测试）并循环遍历它们，我们可以分别对每个项目进行操作，将延迟设置为每个项目的

rel

属性，然后以400的持续时间设置动画。

这类动画非常好，但是它们仍然一次完成。我如何让它按顺序工作，所以，div one淡入，然后等待2秒，然后移动到div two，等待2秒，e.t.cit我自己对它进行了测试，它确实按顺序淡入。演示：看看这里我的意思…从外观上看，所有计时器都在同一时间启动…我明白你的意思，我希望这是预期的行为，因为你的升序rel属性。如果你想计算相对延迟，只需将之前的值添加到e循环中有新的。我将更新。。。

delayTime = 0 // initialise delayTime
$('.rpItem') // select all the items we want to work with
    .css({opacity:0}) // for testing - can be commented out
    .each(function(){ // loop through each item
      $this = $(this) // cahce reference of $(this) to improve performance
      delayTime = delayTime + parseInt($this.attr('rel')) // increment delayTime
      $this.data('delay',delayTime) // set current delayTime to item's data (so that asynchronous calls do not use global/updated version when they are called)
      $this // get reference to item as jQuery object
        .delay( $this.data('delay') ) // set the delay as the item's rel attribute
        .animate({"opacity" : 1}, 400) // fade in the item with duration 400
    })