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过渡,看到这个小提琴

.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在这篇文章中提供了很棒的(并且超级简单)答案.

Answer 5

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

slideToggle 只会上下滑动，如果您正在寻找的话，则不会左右滑动。

如果您还需要切换类，则可以在toggle函数中使用以下命令定义它：

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