Супер сложная функция задержки addClass с разными временными интервалами - PullRequest
Новая
       4

Супер сложная функция задержки addClass с разными временными интервалами

2 голосов
/ 11 февраля 2011

Всего новичков здесь. У меня есть несколько пунктов списка. Мне нужно добавить класс «.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();
                   });                              
            });

Ответы [ 2 ]

1 голос
/ 11 февраля 2011

Примерно так: 

$(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 голосов
/ 11 февраля 2011

Я изменил 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/

...