Question

I have a page where I basically want an element to ‘blink’ for a certain amount of time and then go back to its initial state. Using jquery UI you can animate the addClass() and removeClass() methods:

 $this.addClass('success', 400);

and then

 setTimeout(function(){                 

     $this.removeClass('success', 400);

 }, 1000);

where the class ‘success’ has a

background-color: green 

The first works. But the removeClass() inside the setTimeout simply removes the class without doing ANY animation. What can this be caused by?

Answer 1

Perhaps you’d use such a helpful method as .delay() ?

$('button#test_add').click(function() {
    $('#content').addClass('success', 400);
});

$('button#test_remove').click(function() {
    $('#content').delay(1000).removeClass('success', 400);
});

And here’s a JSFiddle to play with.