在Jquery中创建一个无限循环

Question

HTML结构是这样的

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

我想改变每个CSS <li>从display:none到display:block到none的时间间隔后再次.这在无休止的循环中继续.有人能告诉我如何在jquery中实现这一点.

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

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

我在firebug控制台上测试了这个,但它没有用.我没有继续添加setTimout函数.

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

编辑:我已经编辑了代码,所以我可以更好地解释我想要实现的目标.就像你可以看到每个li是一个低于另一个.li包含相同结构中的图片和一些文本(我在这里省略了以保持简单).因此,我希望一次只显示一个li,然后逐渐淡出.N然后下一个li接管n依此类推,依此类推.我希望每个李活着大约5分钟

Answer 1

DEMO

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

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

Answer 2

编辑:

这个代码是由一个疲惫的程序员(我自己)写得太迟了,不应该因为浏览器的使用而被使用.请参阅jQuery在Chrome和Mac OS上停下来获取生产质量的代码!

请勿使用以下代码.

使用两个相互依赖的函数:

var $lis = $('ul.innerfade > li');

function fadeThemOut()
{
    $lis.fadeOut('slow', fadeThemIn);
}

function fadeThemIn()
{
    $lis.fadeIn('slow', fadeThemOut);
}

// kick it off
fadeThemOut();

演示:http://jsfiddle.net/mattball/nWWSa/

您可以使用以下内容更简洁地编写.fadeToggle():

var $lis = $('ul.innerfade > li');

function toggleThem()
{
    $lis.fadeToggle('slow', toggleThem);
}

// kick it off
toggleThem();

演示:http://jsfiddle.net/mattball/XdAEG/