JQuery UI remove class animations appear non functional

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 ANIMAT开发者_运维百科ING 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

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.

You can workaround this by 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