List Fader - @chanie

by Dave Mednick

HTML

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
</ul>

CSS

li {
    font-size:30px;
    padding:10px;
    background:#eee;
    width:200px;
    text-align:center;
}

JavaScript

var timers = [1000, 1000, 1000, 5000, 1000, 8000, 1000, 1000, 1000, 1000];
// Sorry about my terrible array notation!

function ShowList() {
    var i = 1;

    function showQt() {
        var d = timers[i - 1];
        if (i == 1) $('li').hide().delay(d);
        $('li').eq(i - 1).fadeIn(1000, function () {
            $('li').text(d + 'ms delay');
            $('li').eq(i - 1).delay(d).fadeOut(500, function () {
                if (++i > 10) i = 1;
                showQt();
            });
        });
    }
    showQt();
}
ShowList();