Question

我正在使用一系列CSS3过渡，但是通过使用JQuery UI添加和删除类来备份较旧的机器。

JQuery UI addClass动画功能齐全。然而，JQuery UI 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关键字并将specificity添加到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

JQuery UI删除类动画看起来不起作用

2 个答案: