Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Toggle Classes with delays

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #190182
    Romchick
    Participant

    Hi there!
    I have 4 blocks and I want script to add classes with a delay: appears 1 block, then 2nd and so on. here is the code:

    $(‘#about’).click(function() {
    $(‘.front’).toggleClass(‘open-front’);
    $(‘.back’).toggleClass(‘open-back’);
    });

    And its important to have this two classes works together at the same time (smt like emulation of hover so to show @the back side of the block.

    Got any ideas?

    #190191
    Paulie_D
    Member

    JQ Functions like that happen in a row but they don’t wait for each one to finish before starting the next.

    You add a delay and then tell the next funtion not to fire with .queue()

    http://codepen.io/Paulie-D/pen/OPMgyN/

    #190192
    Paulie_D
    Member

    Or…you can use plain old JS and use setTimeout

    http://codepen.io/Paulie-D/pen/LEVdbV/

    #190193
    Romchick
    Participant

    Before and
    After
    See this color block that after click becom black? They are four. But I want 1st block appear 1st, then the delay 600ms and script adds classes to 2nd block, then delay 1200ms and script adds to 3rd block classes. Thats what I want.

    Pard me, if I dont explaine correct…

    #190195
    Paulie_D
    Member

    So start building….you have the building blocks there.

    Images are no use at all.

    Anyway, I don’t look at JS on live sites (and I don’t think many here would), use Codepen to make a simple demo with 4 simple divs, build the function and post the pen here for advice if you have any issues.

    #190200
    Romchick
    Participant

    Here is the code.

    #190201
    Paulie_D
    Member

    Dude….I’m not going to write it for you!

    I gave you two examples of how it can be done….try figuring it out from there.

    I did.

    I have no skills with Js/JQ but a lot of trial and error and googling got me there….the best way to learn is to figure it out for yourself. Not have someone do your work for you.

    #190203
    Romchick
    Participant

    I’ve been searching for the solution half of the day… thats why I’m here.
    I have very poor exp with Js/JQ neither. So I’m asking it here to see maybe someone had similar expirience. I’ll keep on searching.

    #190208
    Romchick
    Participant

    Here is the solution: Code. If anyone needs use it wise! 8)

    #190216
    Paulie_D
    Member

    See how easy that was?

    Less than 30 minutes later you’ve found and answer.

    #190217
    Romchick
    Participant

    Cuz I’ve stopped searching and asked it! 8)

    #190221
    Paulie_D
    Member

    …and what did you learn?

    Do you even understand the result?

    #190222
    Romchick
    Participant

    Weird, but yes.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.