jQuery .toggleClass()速度

Question

我使用jQuery .toggleClass()函数，类将在每次单击时切换，这是很好的，但我无法设置速度，我尝试过这样做：

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

此外，还包括：

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

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

我添加了最新的jQuery1.10和jqueryUI: 1.10.3

可以设定速度吗？

Answer 1

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

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

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

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

Answer 2

在您的课程中添加：

CSS

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

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

这里是一个演示：

JSnippet Demo

Answer 3

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

这有一些优点

• 简化代码，
• 分离关注点，
• 把工作交给浏览器可能会有更好的表现，
• 在旧浏览器上绝对有更好的性能。

缺点--不一致的浏览器实现意味着从细微的差异到非功能性的(在旧浏览器上，虽然我认为性能的好处大于一致性的好处)。