jquery - 具有不同时间间隔的超难 addClass 延迟功能

Question

总新手在这里。我有一些清单项目。我需要为每个列表项添加一个“.go”类，一次一个，按预定的时间块间隔开。（每个时间块将有不同的持续时间）。

例如：

1. 该脚本将“.go”类添加到第一个 (li)
2. '.go' 类在该 (li) 上保持 4.5 秒。
3. 一旦 4.5 秒结束，脚本会从当前列表项中删除“.go”类
4. 脚本移动到下一个 (li) 并添加一个 '.go' 类
5. '.go' 类在这个 (li) 上保持 1.5 秒。
6. 一旦 1.5 秒结束，脚本会从当前列表项中删除“.go”类
7. 然后循环重复，直到它循环遍历所有列表项

我一直在处理的脚本不起作用。它立即将所有类添加到 (li) 中。然后它们以不同的间隔淡出。相反，我需要以不同的时间间隔添加课程。这是一个例子：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

像这样的东西怎么样：

$(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/

Answer 2

我将 4 个队列更改为如下所示：

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

这是整个事情：http: //jsfiddle.net/ChrisMH/bM6uY/18/