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

在这里有点困惑，不知道它是否是星期一早上蓝调！它只是不工作:(在for循环中设置延迟Jquery/Javascript

什么我想才达到的是：

淡入与设置为相对的区间内的各元素

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

来源

2012-03-12 Graeme Leighfield

问题的工作在你原来的代码使用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

来源

2012-03-12 10:10:57

优秀的这种有点作品，但他们仍然都在做一次。我怎么才能让它按顺序工作，所以，div一个淡入，然后等待2秒，然后移动到div二，等待2秒，e.t.c – 2012-03-12 10:13:15

我自己测试它，它按顺序淡入。在这里演示：http：//jsfiddle.net/7MpCW/ – 2012-03-12 10:17:53

看看这里我的意思是... http://jsfiddle.net/7MpCW/1/从外观上看，所有的定时器都是从同一时间... – 2012-03-12 10:19:45

-1

的setInter Val函数是用来如下

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

来源

2012-03-12 10:00:59

持续动画是否在所有 – 2012-03-12 10:07:24

试试这个：

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

这将visibility:hidden

来源

2012-03-12 10:01:55 sally

我需要它在一个固定的400淡入工作，然后等待rel直到做下一个... – 2012-03-12 10:08:12

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

回答

相关问题