超级困难的 addClass 延迟函数，具有不同的定时间隔

发布于 2024-10-16 14:53:41 字数 1917 浏览 5 评论 0原文

这里完全是新手。我有一些清单项目。我需要向每个列表项添加一类“.go”，一次一个，按预先确定的时间块间隔开。（每个时间块的持续时间都不同）。

例如：

脚本将“.go”类添加到第一个 (li)，
“.go”类在该 (li) 上保留了 4.5 秒。
一旦 4.5 秒结束，脚本会从当前列表项中删除“.go”类
，脚本将移动到下一个 (li) 并添加一个“.go”类，
“.go”类在此 (li) 上保留该类1.5 秒。
一旦 1.5 秒结束，脚本就会从当前列表项中删除“.go”类
然后重复循环，直到它循环完所有列表项

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

原文

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:

the script adds a '.go' class to the first (li)
the '.go' class holds on that (li) for exactly 4.5 seconds.
once the 4.5 seconds are up, the script removes the '.go' class from the current list item
the script moves to the next (li) and adds a '.go' class
the '.go' class holds on this (li) for 1.5 seconds.
once the 1.5 seconds are up, the script removes the '.go' class from the current list item
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();
                   });                              
            });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

困倦 2024-10-23 14:53:41

像这样的东西怎么样：

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

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/

回复收藏 0 原文

朱染 2024-10-23 14:53:41

我将 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/

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 原文

~没有更多了~