CODEWITHSUNDEEP
jqueryjquery-uianimation
Pierlo Upitup
Pierlo Upitup

Reputation: 1612

jQuery UI 1.8 and addClass / removeClass animation not working when in a timeout

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?

Upvotes: 1

Views: 1477

Answers (1)

raina77ow
raina77ow

Reputation: 106375

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.

Upvotes: 4

Related Questions