ToggleClass 动画 jQuery？

Posted 2023-03-06

【中文标题】ToggleClass 动画 jQuery？

【英文标题】：ToggleClass animate jQuery?

【发布时间】：2012-06-26 02:42:02

【问题描述】：

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

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

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

【参考方案1】：

.toggleClass() 不会动画，您应该使用slideToggle() 或.animate() 方法。

【讨论】：

使用 slideToggle() 可以设置一个最小高度，使其不会完全隐藏吗？

【参考方案2】：

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

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

如果您还需要切换类，您可以在 toggle 函数中定义它：

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

【讨论】：

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

正是我想要的

作为旁注（因为我一开始并没有注意到这一点），.toggle() 允许您对 DOM 中元素的隐藏或显示进行动画处理。起初我以为它会为类状态之间的转换设置动画，但事实并非如此。

【参考方案3】：

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

【参考方案4】：

jQuery UI 扩展了 jQuery 原生 toggleClass 以采用第二个可选参数：duration

toggleClass( class, [duration] )

Docs + DEMO

【讨论】：

所以如果我想动画/淡化这个动作我必须使用整个 jQuery UI 库？如果没有 jQuery UI，还有其他方法可以做到这一点吗？

@ed1nh0，您可以只使用您需要的部分创建自定义 jQuery ui。 See here，我必须承认我不知道它应该在哪个类别中。

要在 jQuery UI 中使用动画切换类，您必须加载 Core 和 Effect Core。见jqueryui.com/download/…

我也有类似的问题。添加 UI 仍然不适合我。有任何想法吗？ jsfiddle.net/jb_fresh/06bc8fwb/3

【参考方案5】：

您可以简单地使用 CSS 过渡，请参阅 this fiddle

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


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

【讨论】：

最佳解决方案。 CSS 动画和过渡可以取代无数（现在）不必要的 javascript 函数和动作，并使代码更轻巧。不错的达里奥

【参考方案6】：

我尝试使用 toggleClass 方法在我的网站上隐藏一个项目（使用可见性：隐藏而不是显示：无）并带有轻微的动画，但由于某种原因动画无法正常工作（可能是由于旧版本jQuery UI)。

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

所以为了解决这个问题，我在切换方法中使用了第二个类并应用了 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. 的精彩（而且超级简单）的回答