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 中使用动画切换类,您必须加载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. 的精彩(而且超级简单)的回答
【讨论】:
以上是关于ToggleClass 动画 jQuery?的主要内容,如果未能解决你的问题,请参考以下文章