Question

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

例如：

该脚本将“.go”类添加到第一个（li）
'.go'类持有该（li）4.5秒。
一旦4.5秒启动，脚本将从当前列表项
脚本移动到下一个（li）并添加'.go'类
'.go'类在此（li）上持续1.5秒。
1.5秒后，脚本会从当前列表项
然后循环重复，直到它循环遍历所有列表项

我一直在处理的脚本不起作用。它立即将所有类添加到（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/

超困难的addClass延迟功能w / diff定时间隔

2 个答案: