jQuery .toggleClass（）速度

Question

我使用jQuery .toggleClass（）函数，类会在每次点击时切换，效果很好，但是我无法设置速度，我试过这个：

$('#databox').toggleClass('boxopened', 7000);

也是这样：

$('#databox').toggleClass('boxopened', 'easeInQuad');

还有：http://forum.jquery.com/topic/hover-and-toggleclass-fail-at-speed

我添加了最新的 jquery 1.10 和 jqueryUI：1.10.3

可以设置速度吗？

Answer 1

添加到您的课程：

<强> CSS ：

    -webkit-transition:0.4s;
    -moz-transition:0.4s;
    -ms-transition:0.4s;
    -o-transition:0.4s;
    transition:0.4s;

此“转换声明”将强制计时器，如果它不起作用，请尝试添加!important 或者给我们一些代码来检查。

这是演示：

JSnippet Demo

Answer 2

确保包含JQuery UI Effects - 基本JQuery不允许在show / hide / toggle上进行转换，它是作为UI Effects的扩展添加的。 （在您的应用中或在浏览器控制台中，尝试running $.ui.version）

http://api.jqueryui.com/toggleClass/

编辑：在$.ui.version => "1.10.3"（您要求的版本）上为我工作。这是一个演示：http://jsfiddle.net/yKFjA/1/

您希望观看哪些样式更改？

Answer 3

您可以考虑通过CSS3过渡设置速度;如果您感兴趣，answer I gave to similar question可以帮助您入门。 @Shlomi Hassid也提供了类似的建议。

这有一些优点

• 简化代码，
• 分离关注点，
• 将作业交给浏览器可能会有更好的表现，
• 在旧浏览器上的表现肯定更好

和缺点 - 不一致的浏览器实现意味着从轻微差异到非功能性（在旧版浏览器上，尽管我认为性能优势超过了一致性优势）。

Answer 4

试试这个：

$('#databox').toggleClass('boxopened', 1000, 'easeInQuad');

Answer 5

如果要延迟课程中的更改，请使用setTimeout：

setTimeout( function(){

$('#databox').toggleClass('boxopened');

}, 7000 };