3

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

Improve this question

6 Answers 6

Reset to default
9

DEMO

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

(function loop() {
    el.delay(1000).fadeOut(300).eq(++i%el.length).fadeIn(500, loop);
}());
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

"a working loop" needs the "z" to be an "i" (I haven't edited because the edit is only one char, not the required 6), but the JS Fiddles are correct, and work like a dream. great answer I think - seems to deliver what is required...
ha the very 1st one worked like clock work! I'l try all out tho. And Thanks a lot bro!
This may help someone who is struggling like I was to make this work. Switch around the first line from el = $('.innerfade li') to el = $('li.innerfade'), (that's if you've built your html with the class on the li rather than the ul, as pointed out below)
5

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/

Improve this answer

3 Comments

While the 1st one seems to work like i want it too on jfiddle(but not on my page) the second one returns an error on console -'fadeToggle is not a function'. This said even in jfiddle all li's blink at the same time.
@Randomblue --> cause browsers do not like to go into recursive infinite loops, like browsers DO NOT like to run fx through setIntervals during tab inactivity. LOOP = yes. INFINITE = baaad.
Undo-ed the '-1' for your edit. And i think it's good you did not removed your examples anyway.
2

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/

Improve this answer

3 Comments

Nice use of .toggle(), but I don't think that's the animation that the OP wants...
doesn't seem to work. Do i need jqueryUi for this?? Coz i get an error saying fadetoggle() is not a function!!
@ShalomSam - No, jQueryUI is not required. .fadeToggle() is available as of jQuery 1.4.4. Make sure you use an upper-case "T".
0

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")...
Improve this answer

1 Comment

Good catch with the invalid selector.
0

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

Comments

-1

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.

Improve this answer

1 Comment

@Matt, yeah, I just copied the selector from OP.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.