Add class on click and then remove class on delay

Question

I want a class to be added to a class when a button is pressed then after a few seconds I want the class removed.

So far I have the code for adding the class when the button is pressed:

$( ".overlay-close-button" ).click(function() {
    $( ".icon_holder" ).addClass('magictime tinRightIn');
});

What would the code be to remove the class 'magictime tinRightIn' from 'icon_holder' after lets say 2s after the button class 'overlay-close-button' is clicked?

Answer 1

setTimeout or setInterval in javascript might do the trick. for instance:

$( ".overlay-close-button" ).click(function() 
{
    // problem: $( ".icon_holder" ) selects multiple elements!!!
    $( ".icon_holder" ).addClass('magictime tinRightIn'); 

    setTimeout(function()
    {
        $( ".icon_holder" ).removeClass('magictime tinRightIn');

    }, 2000);
});

Answer 2

A slight modification to @ymz answer. You would probably like to cancel the previously set "setTimeout callback" if the user clicks within 2 seconds.

var timeoutHandler = null;
$( ".overlay-close-button" ).click(function() 
{
    $( ".icon_holder" ).addClass('magictime tinRightIn'); 
    if (timeoutHandler) clearTimeout(timeoutHandler);

    timeoutHandler = setTimeout(function()
    {
        $( ".icon_holder" ).removeClass('magictime tinRightIn');

    }, 2000);
});

Answer 3

You would use setTimeout() to achieve that.

setTimeout(function() { 
   $( ".icon_holder" ).removeClass('magictime tinRightIn');
}, 2e3);