javascript - jQuery .toggleClass() 速度

Question

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

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

还有这个：

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

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

可以设置速度吗？

score 6 · Accepted Answer

添加到您的课程中：

CSS：

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

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

这是一个演示：

JSnippet 演示

score 4 · Accepted Answer

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

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

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

score 1 · Accepted Answer

您可以考虑通过 CSS3 过渡设置速度；如果您感兴趣，我对类似问题的回答可以帮助您入门。@Shlomi Hassid 也提供了类似的建议。

这有一些优点

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

score 0 · Accepted Answer

0

尝试这个：

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

于 2013-07-24T15:16:31.283 回答

score -3 · Accepted Answer

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

setTimeout( function(){

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

}, 7000 };

5 回答 5