切换类动画jQuery？

Question

我网站上有一个部分，当用户点击它时，我希望它能展开。我使用jQuery的toggleClass来实现这个功能...

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

这个已经可以工作了，但是我想以某种方式使其动画化。在Chrome中，我的文章会缓慢地增长到新的大小，但在Firefox中，它会“立即”重新调整大小而没有动画效果，有没有办法让它动画化？

- Liam

Answer 1

jQuery UI 扩展了 jQuery 原生的 toggleClass，可以接受第二个可选参数：duration

toggleClass( class, [duration] )

文档 + 演示

- gdoron is supporting Monica

---

那么如果我想要为这个动作添加动画/淡入淡出效果，我必须使用整个jQuery UI库吗？是否有其他方法可以不使用jQuery UI来完成这个任务？ - ed1nh0

@ed1nh0，你可以只使用所需的部分创建自定义jQuery UI。在这里查看，我必须承认我不知道它应该属于哪个类别。 - gdoron

要在jQuery UI中使用动画的toggleClass，您需要加载“Core”和“Effect Core”。请参见http://jqueryui.com/download/#!themeParams=none&components=1000000000000000000010000000000000。 - Hugo H

我也有类似的问题。添加UI对我仍然没有作用。有什么想法吗？http://jsfiddle.net/jb_fresh/06bc8fwb/3/ - John R

Answer 2

.toggleClass() 不会执行动画效果，你应该使用 slideToggle() 或 .animate() 方法。

- thecodeparadox

---

使用slideToggle()，我可以设置最小高度，以便它不会完全隐藏吗？ - Liam

Answer 3

您可以简单地使用CSS过渡效果，参见此Fiddle示例

.on {
color:#fff;
transition:all 1s;
}

.off{
color:#000;
transition:all 1s;
}

- Dario Corno

---

最佳解决方案。CSS动画和过渡可以替代许多（现在）不必要的JavaScript函数和操作，并使代码更轻巧。干得好Dario。 - Pete - iCalculator

Answer 4

我尝试使用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 在这篇文章中提供的非常棒（而且超级简单）的答案。

- DevManQP

Answer 5

你应该查看在jQuery找到的toggle函数。这将允许你指定一个缓动方法来定义如何切换。

如果你需要左右滑动而不是上下滑动，slideToggle只会上下滑动。

如果你还需要切换类，可以在toggle函数中定义。

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

- Brombomb

---

谢谢@Brombomb，我目前正在使用toggleClass()，只是不确定是否也可以添加动画。 - Liam

作为一个旁注（因为我一开始没有注意到这一点），.toggle()允许您在DOM中动画隐藏或显示元素。我一开始以为它会动画过渡类状态之间的转换，但事实并非如此。 - Matt

Answer 6

应该先检查一下，我一旦包含了jQuery UI库，它就可以正常工作并进行动画处理...

- Liam