JQuery UI удаляет анимации классов, которые не работают

Question

Я использую серию переходов CSS3, но для более старых машин выполняйте резервное копирование с использованием JQuery UI, добавляйте и удаляйте класс.

Анимации JQuery UI addClass полностью функциональны.Пользовательский интерфейс JQuery removeClass, однако, не анимирует, вместо этого он задерживается на время анимации и затем переходит к атрибутам предыдущего класса.

$('.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;
}

Я настроил скрипку, но по какой-то причине эта скрипка вообще ничего не делает, понятия не имею почему.http://jsfiddle.net/aA9LN/4/

Есть идеи?

Изумительно

Answer 1

Похоже, removeClass не нравится ключевое слово !important. Вот демо на jsbin: http://jsbin.com/idorud

Возможно, вы захотите переписать класс .adds, скажем, удалив ключевое слово !important и добавив специфичность в селектор css, например, #someId div.adds.

Answer 2

Вы можете обойти это, используя функцию jquery .animate, чтобы выполнить то же самое.

$('.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