在Jquery中创建一个无限循环 [英] Create an endless loop in Jquery

问题描述

HTML结构就像这样

 < ul class =innerfade> 
< li style =position：absolute; z-index：4; display：none;>一些文字< / li> 
< li style =position：absolute; z-index：3; display：none;> bla bla bla< / li> 
< li style =position：absolute; z-index：2; display：none;> bla bla< / li> 
< li style =position：absolute; z-index：1; display：none;>一些文字< / li> 
< ul> 
  

我想改变每个< li>的 display：none 至 display：block 至 none



到目前为止，我的Jquery看起来像这样 -

  $（' （'）$ b $（this）.css（'display'，'block'）; 
 $（this）.fadeOut（'slow' ）; 
}）; 
  

我在萤火虫控制台上测试过这个功能，但它不起作用。我不会继续添加setTimout函数。

无论如何，任何帮助将不胜感激！

编辑：我编辑了代码，所以我可以更好地解释我想要达到的目标。就像你可以看到每个李是一个在另一个之下。 li包含图片和一些结构相同的文本（为了简化，我省略了这些内容）。因此，我只想要一次显示一次，然后淡出。 N然后下一个李接管n等等等等在无尽的循环中。我希望每一个人都能活下来大概5分钟

解决方案

DEMO

  var el = $（'。innerfade li' ），
i = 0; 
 $（el [0]）。show（）; 
 
（function loop（）{
 el.delay（1000）.fadeOut（300）.eq（++ i％el.length）.fadeIn（500，loop）; 
}（））; 
  

The HTML structure is like this

<ul class="innerfade">
   <li style="position: absolute; z-index: 4; display: none;">some Text</li>
   <li style="position: absolute; z-index: 3; display: none;">bla bla bla</li>
   <li style="position: absolute; z-index: 2; display: none;">bla bla</li>
   <li style="position: absolute; z-index: 1; display: none;">some Text</li>
<ul>

I wanna change the css of each <li> from display:none to display:block to none again after an interval. And this goes on in an endless loop. Can someone tell me how to acheive this in jquery.

So far my Jquery look like this -

$('.innerfade li').each(function()
{
  $(this).css('display', 'block');
  $(this).fadeOut('slow');
});

I tested this on firebug console but it didn't work. And i didnt go ahead and add the setTimout function.

Anyway any Help will be greatly appreciated!

Edit: I have edited the code so i can explain better what i'm trying to acheive. Like you can see each li is one below the other. The li's contain pictures and some text in the same structure(which i have omitted from here to keep things simple). Hence i want only one li to display at a time and then fade out. N then the next li takes over n so on and so forth in an endless loop. And i want each li to stay alive for roughly 5 mins

解决方案

DEMO

var el = $('.innerfade li'),
    i = 0;
$(el[0]).show();

(function loop() {
    el.delay(1000).fadeOut(300).eq(++i%el.length).fadeIn(500, loop);
}());

这篇关于在Jquery中创建一个无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！