JQuery user interface removes class animations

Question

I use a series of CSS3 transitions, but for older processes using JQuery UI, a class is added and removed.

The jQuery UI animations addClass are fully functional. JQuery UI removeClass, however, is not animated, they are instead delayed for the duration of the animation, and then move on to the attributes of the previous class.

$('.box').addClass('adds', 800); ANIMATING CORRECTLY $('.box').removeClass('adds', 800); NOT ANIMATING AT ALL .box { background:#CCC; border:1px solid #222; height:200px; width:200px; } .adds { height:220px !important; width:400px !important; } 

I created a violin, but for some reason this violin does nothing, I don’t know why. http://jsfiddle.net/aA9LN/4/

Any ideas?

Wonderful

Answer 1

It seems that removeClass doesn't like the !important keyword. Here is a demo on jsbin: http://jsbin.com/idorud

You can somehow rewrite the .adds class, for example, by removing the !important keyword and add specificity to the css selector, for example #someId div.adds .

Answer 2

You can get around this using the jquery .animate function to accomplish the same thing.

 $('.box').addClass('adds', 800); //same as before //now instead, use .animate to transition back with effect $('.box').animate({ 'height': '220px', 'width': '200px' }, 800); $('.box').removeClass('adds'); //then just remove the class without any effects