Javascript 切换类设置jQuery动画？

我在我的网站上有一个部分，当用户单击我希望它扩展时，我使用jQuery的

toggleClass

来实现这一点

expandable: function(e) {
    e.preventDefault();
    $(this).closest('article').toggleClass('expanded', 1000);
}

---

这是很好的工作，只是我想以某种方式动画它。在chrome中，我的文章慢慢成长到新的大小，只有在Firefox中，它“立即”调整自身大小，而没有动画，有没有办法让它动画化

.toggleClass（）

将不会设置动画，您应该选择

slideToggle（）

或

.animate（）

方法。

您应该查看上的

toggle

函数。这将允许您指定缓和方法来定义切换的工作方式

slideToggle

只会上下滑动，而不是左/右滑动（如果您正在寻找）

如果您还需要切换类，您可以在

toggle

函数中使用以下命令：

$(this).closest('article').toggle('slow', function() {
    $(this).toggleClass('expanded');
});

---

应该检查一下，一旦我包含了jQueryUI库，它工作得很好，并且正在制作动画

---

jqueryui扩展jQuery原生

切换类

以获取第二个可选参数：

持续时间

toggleClass( class, [duration] )

---

您可以简单地使用CSS转换，请参见

---

我尝试使用toggleClass方法隐藏站点上的项目（使用visibility:hidden而不是display:none），但由于某些原因，该动画无法工作（可能是由于jQuery UI的旧版本）

该类被正确地删除和添加，但我添加的持续时间似乎没有任何区别-该项只是简单地添加或删除，没有任何效果

因此，为了解决这个问题，我在toggle方法中使用了第二个类，并应用了CSS转换：

CSS：

.hidden{
    visibility:hidden;
    opacity: 0;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}
.shown{
    visibility:visible;
    opacity: 1;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}

JS：

    function showOrHide() {
        $('#element').toggleClass("hidden shown");
    }

---

感谢@tomas.satinsky在

上用slideToggle（）给出了非常棒（而且非常简单）的答案。我可以设置一个最小高度，这样它就不会完全隐藏吗？感谢@Brombomb，我目前正在使用toggleClass（），我只是不确定我是否也可以添加动画。我想要的正是一个旁注（因为我一开始没有注意到这一点）。toggle（）允许您在DOM中设置隐藏或显示元素的动画。一开始我以为它会动画化类状态之间的转换，但事实并非如此。因此，如果我想动画化/淡出这个动作，我必须使用整个jQuery UI库？？在没有jQuery UI的情况下，还有其他方法可以做到这一点吗？@ed1nh0，您可以创建一个自定义的jQuery UI，其中只包含您需要的部分，我必须承认我不知道它应该属于哪一类。要在jQuery UI中使用动画切换类，必须加载

Core

和

Effect Core

。看，我也有类似的问题。添加UI对我来说仍然不起作用。有什么想法吗？最好的解决方案。CSS动画和转换可以替换大量（现在）不必要的JavaScript函数和动作，并使代码更加轻巧。不错，达里奥

    function showOrHide() {
        $('#element').toggleClass("hidden shown");
    }