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

Boyce

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.

Airel

@WilliamNiu - nice catch! ...however, as for applying your suggestion of being more specific on the selector, that won't work when the style your tyring to override is an inline style (seen in jquery plugins and thru the use of .attr). So essentially, I had to change the inline style with .css, but that's not going to give me the smooth transition effect. However, jquery's other .animate function will. Only thing I don't like about that, is that my style values are hardcoded and not in the CSS file. But it works. – Diggins

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

Diggins

also, if you don't want to hardcode the css style values into the javascript since .animate takes an object (of styles), just save the orginal css styles you are animating (height and width) into a custom attribute before making any changes and then refer back to it when transitioning back. – Diggins