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
    })

它将选择所有.rpItem（然后将不透明度设置为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);
    }
};

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

3 个答案: