Delays - Working with .toggleClass

Question

I want to create a delay between each element, it has to be 500ms. However there is already an initial delay at present. I have a solution, but it looks messy and want it leaner than what I have at present.

Currently I have added 1500ms (starting delay) for both. On the second element I have added 500ms (second element delay) to the earlier value to achieve the end result.

I have this code:

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

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

Any ideas how to achieve better practise? I have tried .promise() / .delay() / .done(). To no avail.

Please post the first function code as well. Sounds like you need to hook into the callback of that area. — BReal14, Sep 15 '14 at 14:03
http://stackoverflow.com/questions/16203237/easing-not-working-with-toggleclass-or-addclass — Control Freak, Sep 15 '14 at 14:05

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

It's not quite clear what you want but essentially for a group of items you can iterate through them and then delay them by their index multiplied by a constant delay rate.

You can use jQuery's .queue() and .delay() to delay the adding of a class as this doesn't work with merely delay (SO) - arguably not much better but this is the way your would achieve it with jQuery.

jsfiddle

edited May 23 '17 at 11:49

Community

1
1

answered Sep 15 '14 at 14:06

RichieAHB

2,030
2
20
33

Thanks for the post, It seems annoying why I can't add a delay and wrap it inside a setTimeout, any ideas why toggleClass does not adhere to .delay()? – Neil Sep 15 '14 at 14:13
1

`.delay()` only delays items that are queued by jQuery. Toggling class doesn't get added to the queue by default (normally animation stuff is the only stuff added to the queue). Here we have to manually add it to the queue. – RichieAHB Sep 15 '14 at 14:17

score 0 · Answer 2 · answered Sep 15 '14 at 14:20

Doing your way isn't wrong at all. It just may become hard to mantain with a higher number of functions.

A cleaner and more mantainable approach maybe using setInterval() to perform regular calls to some function, delegating any operation to it, including an optional clearInterval().

An example:

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);
}

DEMO HERE

However great this is, it is only 2 elements, starting a switch and cycling through case's I think is to much. Especially since when the animation is loaded it does not need to be run again? Unless there is dramatic performance difference.. — Neil, Sep 15 '14 at 14:30

Delays - Working with .toggleClass

2 Answers2