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.

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

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.

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