ToggleClass animate jQuery?

ToggleClass animate jQuery?

本文关键字：jQuery animate ToggleClass      更新时间：2023-09-26

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

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

这工作正常，只是我想以某种方式对其进行动画处理。在 chrome 中，我的文章慢慢增长到新的大小，只有在 Firefox 中它"立即"调整大小而没有动画，有没有办法让这个动画？

jQuery UI 扩展了 jQuery 本机toggleClass，以采用第二个可选参数：duration 

toggleClass( class, [duration] )

文档 + 演示

.toggleClass()不会动画化，你应该选择slideToggle()或.animate()方法。

你可以简单地使用CSS过渡，看这个小提琴

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

我尝试使用 toggleClass 方法隐藏我网站上的一个项目（使用 visibility：hidden 而不是 display：none），并带有轻微的动画，但由于某种原因动画不起作用（可能是由于旧版本的 jQuery UI）。

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

因此，为了解决这个问题，我在 switchg 方法中使用了第二个类并应用了 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在这篇文章中提供的令人敬畏（且超级简单）的答案。

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

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

如果你也需要切换类，你可以在toggle函数中使用以下命令对其进行优化：

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

应该检查一下，一旦我包含 jQuery UI 库，它工作正常并且正在制作动画......

相关文章：