开发者

Super Difficult addClass Delay function w/ diff timed intervals

开发者 https://www.devze.com 2023-02-09 16:24 出处:网络
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 duratio

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();
      开发者_运维知识库             });                              
            });


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/


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/

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号