Grow your CSS skills. Land your dream job.

Delay .addClass with jQuery?

  • # March 6, 2013 at 6:33 am

    Howdy,

    I’m having problems combining .delay with .addClass using jQuery. My goal is to have a slight delay before the class is added, but my approach doesn’t seem to solve the issue. The class is added immediately even when I specify a delay. If anyone could suggest a solution for this, or explain to me what I’m doing incorrect…I’d be ever so thankful.

    Here is a code sample:

    $(“.button”).toggle(function() {
    $(“div”).stop().animate({top:’0′}, 600);
    $(this).delay(200).addClass(“active”);
    }, function() {
    $(“div”).stop().animate({top:’-100%’}, 600);
    $(this).delay(200).removeClass(“active”);
    });

    ALSO…I’ve added the **.stop()** before the animation attempting to prevent the next animation from firing until the current is complete. For whatever reason _(mostly my lack of knowledge on the subject)_ this fails to work. Am I writing it properly?

    # March 6, 2013 at 7:28 am

    @eldeeff

    Great…thanks for suggestion.

    # March 6, 2013 at 8:41 am

    Or:

    $(this).delay(500).queue(function(){
    $(this).toggleClass(‘active’);
    $(this).dequeue();
    });

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".