jQuery - add a class and remove it after 500ms [duplicate]

Question

I want to add a class and remove it after 500 miliseconds. It does not work with delay(). To give an simple example I do it here with a background-color:

code pen

jQuery

$('.box').click(function(){

 $('.box').addClass("bg1").delay(500).removeClass("bg1");
});

Answer 1

You can use a timeout for this.

In your case: jsfiddle

$('.box').on('click', function(){

    var self = $(this);

    self.addClass("bg1");

    setTimeout(function(){
        self.removeClass("bg1");
    }, 500);

});

Answer 2

Use a timeout or if using delay, you need to put it in queue:

DEMO

$('.box').click(function () {
    $('.box').addClass("bg1").dequeue().delay(500).queue(function () {
        $(this).removeClass("bg1");
    });
});