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

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?

Can you show how you are assigning $this? I've tested this and it seems fine. My code is slightly different than yours tho. Fiddle here — MilkyWayJoe
– MilkyWayJoe, Commented Jun 29, 2012 at 15:18
mmmh.... ok then it's gotta be a CSS conflict somewhere. Thanks anyway. — Pierlo Upitup
– Pierlo Upitup, Commented Jul 1, 2012 at 10:08

raina77ow · Accepted Answer · 2012-06-29 15:23:42Z

4

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.

answered Jun 29, 2012 at 15:23

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MilkyWayJoe Over a year ago

this is a better approach than directly touch setTimeout

Pierlo Upitup Over a year ago

I appreciate the suggestion of using delay instead of setTimeout!

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related