Create an endless loop in Jquery

Question

The HTML structure is like this

   
some Text
           


        

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 uses CSS-Selectors. What you are doing is trying to get all li-tags inside an innerfade-tag, which obviously doesn't exist.

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

$(".innerface li")...

Answer 3

Although not fit with your Endless Loopm but this is a Loop where you stop at the 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 4

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/

Answer 5

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.

Answer 6

Edit:

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

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/

---

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

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

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

// kick it off
toggleThem();

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