Question

我试图通过使用jQuery UI switchClass（）方法显示一组给定类的div（我正在切换的类不是我用来选择div的类）

我的主要目标是div应该在状态之间设置动画，特别是高度调整（从零隐藏到非零显示）。

switchClass方法允许你指定我已经完成的转换时间，但是当类正确切换时，状态是延迟 - 瞬时的（不是过渡的。所以在延迟相当于指定的缓动时间之后，类交换马上发生。

这是我的代码：

的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

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

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

演示：Fiddle

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

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

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

然后

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

演示：Fiddle

Answer 2

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

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

.switchClass（）作用于类但不会发生缓动

2 个答案: