javascript jQuery .toggleClass() 速度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17837236/
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
jQuery .toggleClass() speed
提问by Mirko Simic
I use jQuery .toggleClass()function, class will toggled per click, that works perfectly, but i can't setup speed, i have tried this:
我使用 jQuery .toggleClass()函数，每次点击都会切换类，效果很好，但我无法设置速度，我试过这个：
$('#databox').toggleClass('boxopened', 7000);
also this:
还有这个：
$('#databox').toggleClass('boxopened', 'easeInQuad');
and also this: http://forum.jquery.com/topic/hover-and-toggleclass-fail-at-speed
还有这个：http: //forum.jquery.com/topic/hover-and-toggleclass-fail-at-speed
I have add latest jquery 1.10and jqueryUI: 1.10.3
我添加了最新的jquery 1.10和jqueryUI: 1.10.3
It's possible to setup speed?
可以设置速度吗？
回答by Shlomi Hassid
Add to your classes:
添加到您的课程中：
CSS:
CSS:
-webkit-transition:0.4s;
-moz-transition:0.4s;
-ms-transition:0.4s;
-o-transition:0.4s;
transition:0.4s;
This "transition declaration" will force the timer , if its not working try adding !importantor give us some code to inspect.
这个“转换声明”将强制计时器，如果它不工作尝试添加!important或给我们一些代码来检查。
HERE IS A DEMO:
这是一个演示：
回答by DRobinson
Ensure that you are including JQuery UI Effects - the base JQuery does not allow transitions on show/hide/toggle, it's added as an extension from UI Effects. (In your app, or in browser console, try running $.ui.version)
确保您包含 JQuery UI Effects - 基础 JQuery 不允许在显示/隐藏/切换时进行转换，它是作为 UI Effects 的扩展添加的。（在您的应用程序或浏览器控制台中，尝试running $.ui.version）
http://api.jqueryui.com/toggleClass/
http://api.jqueryui.com/toggleClass/
EDIT:Works for me on $.ui.version => "1.10.3"(the version you requested). Here's a demo: http://jsfiddle.net/yKFjA/1/
编辑：适用于我$.ui.version => "1.10.3"（您要求的版本）。这是一个演示：http: //jsfiddle.net/yKFjA/1/
What styling changes are being applied that you wish to see animated?
正在应用哪些样式更改，您希望看到动画效果？
回答by Carl
You might consider setting the speed via CSS3 transitions; the answer I gave to similar questioncan get you started if that interests you. @Shlomi Hassid also provides similar advice.
您可以考虑通过 CSS3 过渡设置速度；在我给了类似的问题的答案可以让你如果你感兴趣的开始。@Shlomi Hassid 也提供了类似的建议。
This has some advantages
这有一些优点
- simplification of code,
- separation of concerns,
- possibly better performance by handing off the job to the browser,
- definitely better performance on older browsers
- 代码的简化，
- 关注点分离，
- 通过将工作交给浏览器可能会获得更好的性能，
- 在旧浏览器上绝对有更好的性能
and disadvantages -- inconsistent browser implementations mean anywhere from slight differences to non-functional (on older browsers, though I think the performance benefit outweighs the consistency benefit).
和缺点——不一致的浏览器实现意味着从细微差别到无功能的任何地方（在旧浏览器上，尽管我认为性能优势超过了一致性优势）。
回答by Mike Phils
Try this:
试试这个：
$('#databox').toggleClass('boxopened', 1000, 'easeInQuad');
回答by Chris Herbert
If you want to delay the change in class, use setTimeout:
如果要延迟类中的更改，请使用 setTimeout：
setTimeout( function(){
$('#databox').toggleClass('boxopened');
}, 7000 };
