Задержки — работа с .toggleClass

Я хочу создать задержку между каждым элементом, она должна быть 500 мс. Однако в настоящее время уже есть первоначальная задержка. У меня есть решение, но оно выглядит неряшливо, и я хочу, чтобы оно было компактнее, чем то, что у меня есть сейчас.

В настоящее время я добавил 1500 мс (задержка запуска) для обоих. Для второго элемента я добавил 500 мс (задержка второго элемента) к предыдущему значению, чтобы получить конечный результат.

У меня есть этот код:

if ( $('#brand').length ){
    setTimeout(function(){
        $('#elementA', $brand__service).toggleClass('superman--returns');
    }, 1500);

    setTimeout(function(){
        $('#elementB', $brand__service).toggleClass('birdman--helps');
    }, 2000);
}

Любые идеи, как добиться лучшей практики? Я пробовал .promise()/.delay()/.done(). Но безрезультатно.


javascript jquery delay settimeout toggleclass
person Neil    schedule 15.09.2014    source источник
comment
Пожалуйста, опубликуйте также первый код функции. Похоже, вам нужно подключиться к обратному вызову этой области.   -  person BReal14    schedule 15.09.2014
comment
stackoverflow.com/questions/16203237 /   -  person Control Freak    schedule 15.09.2014

Ответы (2)


arrow_upward
0
arrow_downward

Не совсем понятно, чего вы хотите, но, по сути, для группы элементов вы можете перебирать их, а затем задерживать их на их индекс, умноженный на постоянную скорость задержки.

Вы можете использовать jQuery .queue() и .delay() для задержки добавления класса, так как это не работает с простой задержкой (SO) - возможно, не намного лучше, но именно так вы добьетесь этого с помощью jQuery.

jsfiddle

person RichieAHB    schedule 15.09.2014
comment
Спасибо за пост, кажется раздражающим, почему я не могу добавить задержку и обернуть ее внутри setTimeout, есть идеи, почему toggleClass не придерживается .delay()? - person Neil; 15.09.2014
comment
.delay() задерживает только те элементы, которые поставлены в очередь jQuery. Класс переключения не добавляется в очередь по умолчанию (обычно в очередь добавляются только элементы анимации). Здесь мы должны вручную добавить его в очередь. - person RichieAHB; 15.09.2014

arrow_upward
0
arrow_downward

Делать по-твоему совсем не плохо. Просто может стать трудно поддерживать большее количество функций.

Более чистый и удобный подход может заключаться в использовании setInterval() для выполнения регулярных вызовов какой-либо функции, делегируя ей любую операцию, включая необязательное clearInterval().

Пример:

HTML

<div id="first" class="simpleDiv">First div</div>
<div id="second" class="simpleDiv">Second div</div>
<div id="third" class="simpleDiv">Third div</div>

JS

var divRotationInterval = setInterval(function(){toggleClasses()}, 500);
var startingDiv = 1;

function toggleClasses() {
    switch(startingDiv) {
        case 1:
            $('#first').toggleClass('firstClass');
            break;
        case 2:
            $('#second').toggleClass('secondClass');
            break;
        case 3:
            $('#third').toggleClass('thirdClass');
            break;
    }

    startingDiv++;

    if(startingDiv > 3) {
        startingDiv = 1; //if you want to continue
        //stopRotationInterval(); // if you want to stop
    }
}

function stopRotationInterval() {
    clearInterval(divRotationInterval);
}

ДЕМО ЗДЕСЬ

person Davide Rossi    schedule 15.09.2014
comment
Как бы здорово это ни было, это всего лишь 2 элемента: запуск переключателя и циклическое переключение между корпусами, я думаю, это слишком много. Тем более что при загрузке анимации ее не нужно запускать заново? Если нет существенной разницы в производительности.. - person Neil; 15.09.2014