javascript 在 Jquery 中创建无限循环

Create an endless loop in Jquery

提问by ShalomSam

The HTML structure is like this

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>

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

我想在一段时间后再次将每个的 css 更改为<li>fromdisplay:none到display:blockto none。并且这种情况无限循环。有人可以告诉我如何在 jquery 中实现这一点吗？

So far my Jquery look like this -

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

$('.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.

我在萤火虫控制台上对此进行了测试，但没有奏效。我没有继续添加 setTimout 函数。

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

编辑：我已经编辑了代码，所以我可以更好地解释我想要实现的目标。就像你可以看到每个 li 一个在另一个下面。li 包含相同结构的图片和一些文本（为了简单起见，我从这里省略了这些）。因此，我希望一次只显示一 li，然后淡出。N 然后下一个 li 接管 n 以此类推，以无限循环。我希望每个 li 能存活大约 5 分钟

回答by Roko C. Buljan

DEMO

演示

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

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

回答by Matt Ball

Edit:

编辑：

This code was written way too late at night by a tired programmer (myself), and should not be useddue to browser hosing. Please see jQuery draws to a halt on Chrome and mac OSfor production-quality code!

这段代码是一个疲倦的程序员（我自己）在深夜写的，由于浏览器软管不应该使用。请参阅jQuery 在 Chrome 和 mac OS 上停止以获取生产质量的代码！

Do not use the below code.

不要使用下面的代码。

---

---

Use two mutually-dependent functions:

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

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

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

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

// kick it off
fadeThemOut();

Demo: http://jsfiddle.net/mattball/nWWSa/

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

---

---

You can write this more concisely using .fadeToggle():

您可以使用以下命令更简洁地​​编写.fadeToggle()：

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

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

// kick it off
toggleThem();

Demo: http://jsfiddle.net/mattball/XdAEG/

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

回答by gilly3

Try this

试试这个

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

Edit:Based on your clarification of what you are trying to achieve:

编辑：根据您对您要实现的目标的说明：

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

The above gives you a cross-fade effect. If you want to completely fade out before fading in the next element, you want this:

以上为您提供了交叉淡入淡出效果。如果您想在下一个元素淡入之前完全淡出，您需要：

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

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

回答by F.P

jQuery uses CSS-Selectors. What you are doing is trying to get all li-tags inside an innerfade-tag, which obviously doesn't exist.

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

You need to select it using its class, just like in CSS:

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

$(".innerface li")...

回答by i am ArbZ

Although not fit with your Endless Loopm but this is a Loop where you stop at the Endpoint

虽然不适合你的 Endless Loopm 但这是一个你在端点处停止的循环

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

回答by Saeed Neamati

try this:

试试这个：

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

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

Check out this fiddle.

看看这个小提琴。