.switchClass() 作用于 类 但不会出现缓动

Question

我试图通过使用 jQuery UI switchClass() 方法（我正在切换的 class 来显示一组具有给定 class 的 div不是我用来 select div 的那个）

我的主要 objective 是 div 应该在状态之间动画，具体是高度调整（从零 - 隐藏，到非零显示）。

switchClass 方法允许您指定转换时间，我已经这样做了，但是当 classes 正确切换时，状态是 delayed-instantaneous（不是 transitional。所以延迟相当于指定缓和时间，class 交换立即发生。

这是我的代码：

jQuery

        function revealWarnings(){
        $('.container-warning').switchClass( 'packed', 'unpacked', 1000, 'linear' );            
    }

CSS

.packed{
height:0 !important;
}
.unpacked{
height:32px !important;
}

我的 jQuery UI（从我的源文件中说明）是：

jQuery UI - v1.11.4 - 2015-04-05

Answer 1

确保包含 jquery-ui.css 文件。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

Answer 2

问题是您的 css 规则中的 !important 符号，它覆盖了动画应用的内联 css。

.packed {
    height:0;
}
.unpacked {
    height:32px;
}

演示：Fiddle

注意：如果您有任何特定原因使用 !important，请分享它们（并使用上述 fiddle 重新创建问题）以便我们查看。

---

如果可以使用css3个动画那么

.container-warning {
    overflow-y: hidden;
    transition: height 1s;
}
.packed {
    height:0 !important;
}
.unpacked {
    height:32px !important;
}

然后

$('.container-warning').removeClass('packed').addClass('unpacked');

演示：Fiddle