JQuery - add a class and delete it after 500 ms

Question

I want to add a class and delete it after 500 milliseconds. It does not work with a delay (). To give a simple example, I am doing this here with a background color:

code pen

JQuery

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

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

Answer 1

You can use timeoutfor 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 using a delay, you need to queue it:

Demo

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

Answer 3

- jquery .

i.e

$('.box').click(function(){
        $('.box').addClass("bg1");
        setTimeout(function(){
            $('.box').removeClass("bg1");
        },500);
    });

Answer 4

:

setTimeout(function() {
    // Do stuff
}, 500);

Answer 5

$('.box').click(function(){
 $('.box').addClass("bg1");
 setTimeout(function() {
    $('.box').removeClass("bg1")
 }, 500);
});

:

Answer 6

:

$('.box').click(function(){
    $('.box').addClass("bg1");
    setTimeout("$('.box').removeClass('bg1')", 500);
});