Forums

Rugg

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?

Eldeeff

A quick Google gave me this.

In short, use setTimeout.

Rugg

@eldeeff

Great…thanks for suggestion.

CrocoDillon

Or:

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

treehouse : what would you like to learn today?

Forums

[Solved] Delay .addClass with jQuery?