The HTML structure is like this

<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:none to display:block to none again after an interval. And this goes on in an endless loop. Can someone tell me how to acheive this in jquery.

So far my Jquery look like this -

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

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

The HTML structure is like this

<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:none to display:block to none again after an interval. And this goes on in an endless loop. Can someone tell me how to acheive this in jquery.

So far my Jquery look like this -

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

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

• javascript
• jquery
• html
• jquery-ui

6 Answers 6

DEMO

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

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

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/

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/

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")...

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

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.