JQuery UI remove class animations appear non funct

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.

Answer 2

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