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

我想在间隔后再次将每个 <li> 的 css 从 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 依此类推。我希望每个 li 能存活大约 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 draws to a halt on Chrome and 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/

Answer 3

试试这个

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

http://jsfiddle.net/gilly3/CDHJY/

Answer 4

jQuery 使用 CSS 选择器。您正在做的是试图将所有li-tags 放入innerfade-tag 中，这显然不存在。

您需要使用它的class 来选择它，就像在 CSS 中一样：

$(".innerface li")...

Answer 5

虽然不适合您的 Endless Loopm，但这是一个您在 Endpoint 处停止的循环

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

Answer 6

试试这个：

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

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

看看这个fiddle。