Javascript 在Jquery中创建一个无止境的循环

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>

我在firebug控制台上测试了这个，但它不起作用。我没有继续添加setTimout函数

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

编辑：我对代码进行了编辑，以便更好地解释我想要实现的目标。就像你可以看到每一个李是一个低于另一个。li's包含相同结构的图片和一些文本（为了保持简单，我在这里省略了这些内容）。因此，我希望一次只显示一个li，然后淡出。然后下一个李接手N，如此循环，如此循环。我希望每个李都能活大约5分钟 这段代码是由一位疲惫不堪的程序员（我自己）在深夜编写的，由于浏览器堵塞，不应使用。请参阅产品质量代码

不要使用下面的代码。

---

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

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

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

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

// kick it off
fadeThemOut();

演示：

---

您可以使用

.fadeToggle（）

更简洁地编写此代码：

---

演示：

jQuery使用CSS选择器。您所做的是尝试将所有

li

-标记放入

innerfade

-标记中，该标记显然不存在

您需要使用它的

类

来选择它，就像在CSS中一样：

$(".innerface li")...

试试这个：

$(function() {
    $('.innerfade li').each(function() {
        blink($(this))
    });
});

function blink(li) {
    li.fadeOut('slow', function() {
        li.fadeIn('slow', blink(li));
    });
}

看看这个。

试试这个

setInterval(function(){
    $(".innerfade li").fadeToggle();
}, 1000);

编辑：根据您对想要实现的目标的澄清：

(function () {
    var i = 0;
    var delay = 1000 * 60 * 5; // 5 minutes
    var items = $(".innerfade li");
    var len = items.length;
    setInterval(function () {
        items.fadeOut().eq(++i % len).fadeIn();
    }, delay);
})();

上面给出了交叉淡入效果。如果要在下一个元素中淡出之前完全淡出，请执行以下操作：

(function () {
    var i = 0;
    var delay = 1000 * 60 * 5; // 5 minutes
    var items = $(".innerfade li");
    items.eq(0).show();
    var len = items.length;
    setInterval(function () {
        items.filter(":visible").fadeOut(function() {
            items.eq(++i % len).fadeIn();
        });
    }, delay);
})();

---

虽然不适合无休止的循环，但这是一个在端点处停止的循环

var el = $('.innerfade li'), i = 0; $(el[0]).fadeIn();<BR> (function loop() { if(i+1<4){ el.delay(1000).fadeOut(300).eq(++i%el.length).fadeIn(500, loop);<BR>} else el.delay(1500).fadeOut(1000); <BR>} ());

---

var el=$（'.innerfade li'），i=0$（el[0]）.fadeIn（）
（函数loop（）{if（i+1）很好地捕获了无效的选择器。使用了
.toggle（）
，但我认为这不是OP想要的动画…似乎不起作用。我需要jqueryUi吗？因为我在说fadetoggle（）时出错不是函数！！@shalosam-不，jQueryUI不是必需的。从jQuery 1.4.4开始提供。请确保使用大写字母“T”。@Matt，是的，我刚刚从OP复制了选择器。而第一个选择器似乎也在jfiddle上工作（但不是在我的页面上）第二个在控制台上返回一个错误-“fadeToggle不是一个函数”。这表示即使在jfiddle中，li也会同时闪烁。@Randomblue-->因为浏览器不喜欢进入递归无限循环，就像浏览器不喜欢在tab不活动期间通过SetInterval运行fx一样。LOOP=yes.infinite=baaad.Undo-ed为您设置了“-1”我认为你没有删除你的例子是很好的。“一个工作循环”需要“z”变成“i”（我没有编辑，因为编辑只是一个字符，不是必需的6），但JS提琴是正确的，工作起来像做梦一样。我认为答案很好-似乎能提供所需的…哈，第一个工作起来像时钟一样！我会尽全力的。非常感谢兄弟！这可能会帮助像我一样努力工作的人。将第一行从el=$（'.innerfade li'）切换到el=$（'li.innerfade'），（如果您是使用li而不是ul上的类构建html的，如下所述）
(function () {
    var i = 0;
    var delay = 1000 * 60 * 5; // 5 minutes
    var items = $(".innerfade li");
    items.eq(0).show();
    var len = items.length;
    setInterval(function () {
        items.filter(":visible").fadeOut(function() {
            items.eq(++i % len).fadeIn();
        });
    }, delay);
})();

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

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

var el = $('.innerfade li'), i = 0; $(el[0]).fadeIn();<BR> (function loop() { if(i+1<4){ el.delay(1000).fadeOut(300).eq(++i%el.length).fadeIn(500, loop);<BR>} else el.delay(1500).fadeOut(1000); <BR>} ());