ToggleClass动画jQuery？

Question

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

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

这工作得很好，只是我想以某种方式使其具有动画效果。在chrome中，我的文章慢慢地增长到新的大小，只有在Firefox中，它‘立即’调整了自己的大小，没有动画，有没有办法让它有动画效果？

Answer 1

jQuery UI扩展了jQuery本机toggleClass以接受第二个可选参数：duration

toggleClass( class, [duration] )

Docs + DEMO

Answer 2

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

Answer 3

您可以简单地使用CSS转换，参见this fiddle。

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

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