JQuery UI remove class animations appear non functional

Question

I am using a series of CSS3 transitions but for older machinges back up by using JQuery UI add and remove class.

JQuery UI addClass animations are fully functional. JQuery UI removeClass however are not animating they are instead delaying for the animation time and then jumping 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 have set up a Fiddle but for some reason this fiddle does nothing at all, no idea why. http://jsfiddle.net/aA9LN/4/

Any ideas?

Marvellous

Answer 1

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

You may want to somehow rewrite the .adds class by, say, removing the !important keyword and add specificity to the css selector, e.g. #someId div.adds.