jQuery UI switchClass() method is not working properly

Question

jQuery UI switchClass() method doesn\'t switch class, rather it performs some undesired animations and the class remains the same as the original one when I use

Answer 1

Make sure the classes you are using doesn't have any "!important" properties. I have invested and found that jquery UI switch class doesn't work for properties with "!important" tags.

Reason : Consider that your previous class had style "padding : 0" and your new class has "padding:100". You have added switchClass duration for 100 ms. What jquery will do for this is, it will add a style to your element by increasing padding by "1" in every 1 ms. But, as the previous class is still there in the element with a "padding : 0 !important", after 10 ms, "padding : 10" style added by jquery doesn't effect the UI. After 100 ms, jquery will execute removeClass("previousClass") and addClass("newClass"). this will result to a instant change in style reflected in the UI.

This is the explanation I find-out. Please let me know what you guys think about this.