Javascript ToggleClass 动画 jQuery？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11179238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ToggleClass animate jQuery?
提问by Liam
I have a section on my website that when a user clicks I would like it to expand, I'm using the jQuery's toggleClassfor this...
我在我的网站上有一个部分，当用户点击我希望它展开时，我使用 jQuery 来toggleClass实现这个......
expandable: function(e) {
e.preventDefault();
$(this).closest('article').toggleClass('expanded', 1000);
}
This is working fine, only I'd like to somehow animate it. In chrome my article slowly grows to the new size, only in Firefox it 'instantly' resizes itself with no animation, is there a way to have this animate?
这工作正常，只有我想以某种方式对其进行动画处理。在 chrome 中，我的文章慢慢增长到新的大小，只有在 Firefox 中它“立即”调整自己的大小而没有动画，有没有办法让这个动画？
回答by gdoron is supporting Monica
jQuery UI extends the jQuery native toggleClassto take a second optional parameter: duration
jQuery UI 扩展了 jQuery 本机toggleClass以采用第二个可选参数：duration
toggleClass( class, [duration] )
回答by thecodeparadox
.toggleClass()will not animate, you should go for slideToggle()or .animate()method.
.toggleClass()不会动画，你应该去寻找slideToggle()或.animate()方法。
回答by Dario Corno
You can simply use CSS transitions, see this fiddle
您可以简单地使用 CSS 过渡，请参阅此小提琴
.on {
color:#fff;
transition:all 1s;
}
.off{
color:#000;
transition:all 1s;
}
回答by DevManQP
I attempted to use the toggleClass method to hide an item on my site (using visibility:hidden as opposed to display:none) with a slight animation, but for some reason the animation would not work (possibly due to an older version of jQuery UI).
我尝试使用 toggleClass 方法隐藏我网站上的一个项目（使用可见性：隐藏而不是显示：无）并带有轻微的动画，但由于某种原因动画不起作用（可能是由于旧版本的 jQuery UI ）。
The class was removed and added correctly, but the duration I added did not seem to make any difference - the item was simply added or removed with no effect.
该类被删除并正确添加，但我添加的持续时间似乎没有任何区别 - 该项目只是被添加或删除而没有任何效果。
So to resolve this I used a second class in my toggle method and applied a CSS transition instead:
所以为了解决这个问题，我在我的切换方法中使用了第二个类并应用了 CSS 过渡：
The 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;
}
The JS:
JS：
function showOrHide() {
$('#element').toggleClass("hidden shown");
}
Thanks @tomas.satinsky for the awesome (and super simple) answer on this post.
回答by Brombomb
You should look at the togglefunction found on jQuery. This will allow you to specify an easing method to define how the toggle works.
您应该查看在jQuery 上toggle找到的函数。这将允许您指定一个缓动方法来定义切换的工作方式。
slideTogglewill only slide up and down, not left/right if that's what you are looking for.
slideToggle如果这是您要找的东西，它只会上下滑动，而不是向左/向右滑动。
If you need the class to be toggled as well you can deifine that in the togglefunction with a:
如果您还需要切换该类，您可以在toggle函数中定义它：
$(this).closest('article').toggle('slow', function() {
$(this).toggleClass('expanded');
});
回答by Liam
Should have checked, Once I included the jQuery UI Library it worked fine and was animating...
应该检查一下，一旦我包含了 jQuery UI 库，它就可以正常工作并且正在制作动画...
