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

Question

这里有点困惑，不确定是不是星期一早上的忧郁！它就是不工作：

我想要实现的是：

将间隔设置为rel，淡入每个元素。

我的HTML代码是(这些都是用CSS隐藏的)

    <div id="rpStage">
        <div class="rpItem" rel="500">
            <p>0</p>
        </div>
        <div class="rpItem" rel="4000">
            <p>1</p>
        </div>
        <div class="rpItem" rel="6000">
            <p>2</p>
        </div>
    </div>

和我的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();
});

Answer 1

您的原始代码中的问题是使用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
    })

它将选择所有的延迟(然后将不透明度设置为0以进行测试)并循环遍历它们。然后通过引用$(this)，我们可以单独操作每个项目，将延迟设置为每个项目的rel属性，然后以持续时间400作为动画。

Answer 2

试试这个：

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

这将适用于visibility:hidden

Answer 3

setInterval函数的用法如下

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