jQuery .toggleClass() 速度答案

【问题标题】：jQuery .toggleClass() speedjQuery .toggleClass() 速度
【发布时间】：2016-01-06 03:40:29
【问题描述】：

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

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

还有这个：

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

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

可以设置速度吗？

【问题讨论】：

【解决方案1】：

添加到您的课程中：

CSS：

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

这个“过渡声明”将强制计时器，如果它不工作尝试添加!important 或者给我们一些代码来检查。

这里有一个演示：

JSnippet Demo

【讨论】：

【解决方案2】：

确保您包含 JQuery UI 效果 - 基本 JQuery 不允许在显示/隐藏/切换上进行转换，它是作为 UI 效果的扩展添加的。（在您的应用程序或浏览器控制台中，尝试running $.ui.version）

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

正在应用哪些样式更改，您希望看到动画效果？

【讨论】：

如果我尝试使用：console.log ($.ui); - 我看到的输出：未定义和这个console.log（$.ui.version）；正如我所看到的：未捕获的类型错误：无法读取未定义的属性“版本”
意味着您没有加载 JQuery UI。你现在只有 JQuery (base)。一旦你在那里获得了 JQuery UI，一切就应该可以工作了。
回答：正在应用哪些样式更改，您希望看到动画效果？ - 这是请求，如果盒子比 207px 高，那么高度是 207，溢出隐藏，如果我点击按钮，然后我添加新类：高度：自动；
是的，这应该可以，只需尝试重新配置以确保 JQuery UI 库已加载。它没有被获取（否则 $.ui 不会是未定义的）。
现在完美运行，.css 文件必须包含在 .js 文件之前，感谢所有...这是一次艰难的经历 :)

【解决方案3】：

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

这有一些好处

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

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：

【解决方案5】：

如果你想延迟类的变化，使用setTimeout：

setTimeout( function(){

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

}, 7000 };

【讨论】：