ToggleClass 动画 jQuery?

Posted

技术标签:

【中文标题】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 中使用动画切换类,您必须加载 CoreEffect 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. 的精彩(而且超级简单)的回答

【讨论】:

以上是关于ToggleClass 动画 jQuery?的主要内容,如果未能解决你的问题,请参考以下文章

在 ToggleClass 上转发动画

动画 jQuery 滚动顶部

jQuery的toggleClass()函数代码实例

jQuery的toggleClass()函数代码实例

jQuery:单击外部元素以“关闭”使用toggleClass出现的菜单

toggleClass 可以在 Safari 中工作吗? (jQuery)