JQuery UI 删除类动画出现无效答案

【问题标题】：JQuery UI remove class animations appear non functionalJQuery UI 删除类动画出现无效
【发布时间】：2011-09-28 16:35:58
【问题描述】：

我正在使用一系列 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/

有什么想法吗？

太棒了

【问题讨论】：

标签： css jquery-ui animation removeclass

【解决方案1】：

您可以通过使用 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

【讨论】：

另外，如果您不想将 css 样式值硬编码到 javascript 中，因为 .animate 需要一个对象（样式），只需保存您正在制作动画的原始 css 样式（高度和宽度) 在进行任何更改之前导入自定义属性，然后在转换回来时引用它。

【解决方案2】：

似乎removeClass 不喜欢!important 关键字。这是一个关于 jsbin 的演示：http://jsbin.com/idorud

您可能希望以某种方式重写 .adds 类，例如，删除 !important 关键字并将 specificity 添加到 css 选择器，例如#someId div.adds.

【讨论】：

@WilliamNiu - 不错的收获！ ...但是，至于在选择器上应用更具体的建议，当您要覆盖的样式是内联样式时（在 jquery 插件中看到并通过使用.attr），这将不起作用。所以本质上，我不得不用.css 改变内联样式，但这不会给我带来平滑的过渡效果。但是，jquery 的其他.animate 函数会。我唯一不喜欢的是，我的样式值是硬编码的，而不是在 CSS 文件中。但它有效。