CODEWITHSUNDEEP
jquery
Sam 山
Sam 山

Reputation: 42863

jQuery delay not working

$('.transparent').removeClass('transparent').delay(2000).addClass('not_transparent').delay(4000)

I have a div that is semi transparent and then want to switch it to not transparent. But the jQuery .delay(); method doesn't seem to work here. I've tried .fadeIn(); instead and that works with a delay but it doesn't work the changing classes.

Upvotes: 68

Views: 60066

Answers (3)

yungtechboy1
yungtechboy1

Reputation: 76

.delay() does not work with the .addClass() tag outside of a function so just use: 

delay();
function delay(){
     $('.pgtitle').delay(5000).fadeIn(0).addClass('animated bounceInDown');
}

Upvotes: 1

Someone
Someone

Reputation: 3568

I know this is an old question, but there's still a lot of traffic coming here from google so I'll add my two cents;

You could use something like -

$('.transparent').fadeIn().delay(500).queue(function(){
  $('.transparent').addClass('yourclass');
});

You can pass a function to the queue in order to execute them after the delay. Have been using this myself for very similar examples.

Upvotes: 10

user113716
user113716

Reputation: 322502

.delay() is used for items that are part of a queue, like animations. A simple addClass is not queued.

You could use setTimeout.

var trans = $('.transparent').removeClass('transparent');
setTimeout(function() {
    trans.addClass('not_transparent');
}, 2000);

As an alternative, you could add the non-queued item to the queue using .queue(), though I think a setTimeout would be better.

$('.transparent').removeClass('transparent').delay(2000).queue(function(nxt) {
      $(this).addClass('not_transparent');
      nxt();
});

Upvotes: 149

Related Questions