编辑：

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依此类推，依此类推。我希望每个李活着大约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-Selectors。您正在做的是尝试在li - 标记内部获取所有innerfade - 标记，这显然不存在。

您需要使用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。

在Jquery中创建一个无限循环

6 个答案:

编辑：

请勿使用以下代码。