CODEWITHSUNDEEP
jquerytimeoutaddclass
Bizarro Zeldman
Bizarro Zeldman

Reputation: 257

Super Difficult addClass Delay function w/ diff timed intervals

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

Upvotes: 2

Views: 831

Answers (2)

Chris Hogan
Chris Hogan

Reputation: 868

I changed the the 4 queues to something like the following:

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

Here's the whole thing: http://jsfiddle.net/ChrisMH/bM6uY/18/

Upvotes: 0

Chris
Chris

Reputation: 4471

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/

Upvotes: 1

Related Questions