ToggleClass动画jQuery？

Question

我的网站上有一个部分，当用户点击我想扩展时，我正在使用jQuery的toggleClass ...

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

这很好用，只是我想以某种方式动画它。在Chrome中，我的文章慢慢增长到新的大小，只有在Firefox中它“立即”调整自身没有动画，有没有办法让这个动画？

Answer 1

jQuery UI扩展了jQuery native 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;
}

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在this post.

上的精彩（和超级简单）答案

Answer 5

您应该查看jQuery上的toggle功能。这将允许您指定一个缓动方法来定义切换的工作方式。

slideToggle只会上下滑动，而不是左/右滑动，如果这就是您要找的内容。

如果您需要切换课程，您可以使用以下内容在toggle函数中对此进行设置：

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

Answer 6

应该检查一下，一旦我加入了jQuery UI库，它就可以正常工作了......