Question

Total Novice here. I have some list items. I need to add a class of ‘.go’ to each list item, one at a time, spaced out by pre-determined blocks of time. (each block of time will be different durations).

For instance:

1. the script adds a ‘.go’ class to the first (li)
2. the ‘.go’ class holds on that (li) for exactly 4.5 seconds.
3. once the 4.5 seconds are up, the script removes the ‘.go’ class from the current list item
4. the script moves to the next (li) and adds a ‘.go’ class
5. the ‘.go’ class holds on this (li) for 1.5 seconds.
6. once the 1.5 seconds are up, the script removes the ‘.go’ class from the current list item
7. And then the cycle repeats, until it has cycled through all the list items

The script I have been working on does not function. It adds all the classes to the (li)’s instantly. And then they fadeout at different intervals. Rather I need the classes to BE ADDED at different intervals. Here’s an example: http://jsfiddle.net/bM6uY/8/

                         <ul>
                            <li>hello</li>
                            <li>World!</li>
                            <li>Foo</li>
                            <li>Bar</li>
                         </ul>

---

         $(function() {
           $('ul li:nth-child(1)').addClass("go")
                   .delay(4500)
                   .queue(function() {
                       $(this).removeClass("go");
                       $(this).dequeue();
                   });


            $('ul li:nth-child(2)').addClass("go")
                   .delay(1500)
                   .queue(function() {
                       $(this).removeClass("go");
                       $(this).dequeue();
                   });    


             $('ul li:nth-child(3)').addClass("go")
                   .delay(500)
                   .queue(function() {
                       $(this).removeClass("go");
                       $(this).dequeue();
                   });      


             $('ul li:nth-child(4)').addClass("go")
                   .delay(5000)
                   .queue(function() {
                       $(this).removeClass("go");
                       $(this).dequeue();
                   });                              
            });

Answer 1

How about something like this:

$(function() {
    var index = 0;
    var length = $("ul").children().length;
    var delays = [
            500,
            1500,
            500,
            5000
    ];

    function delayNext()
    {
        setTimeout(function() {
            $("ul li:eq(" + index + ")").addClass("go").siblings().removeClass("go");
            index++;

            if (index == length)
                index = 0;

            delayNext();
        }, delays[index]);
    }

    delayNext();
});

http://jsfiddle.net/rfvgyhn/9VL4r/2/