Javascript jQuery.toggleClass（）速度

我使用jQuery.toggleClass（）函数，每次单击都会切换类，这非常有效，但我无法设置速度，我尝试了以下方法：

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

还包括：

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

还有：

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

---

是否可以设置速度？

如果要延迟类中的更改，请使用设置超时：

setTimeout( function(){

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

}, 7000 };

---

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

编辑：适用于

$.ui.version=>“1.10.3”

（您请求的版本）。下面是一个演示：

正在应用哪些样式更改，您希望将其设置为动画？

添加到您的类中：

CSS：

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

此“转换声明”将强制计时器，如果计时器不工作，请尝试添加

！重要信息

或者给我们一些代码来检查

这里有一个演示：

---

< P>你可以考虑通过CSS3转换设置速度；如果你感兴趣的话，你可以开始学习@Shlomi Hassid也提供了类似的建议

这有一些好处

• 简化代码
• 关注点分离
• 将作业交给浏览器可能会提高性能
• 在较旧的浏览器上性能绝对更好

缺点——不一致的浏览器实现意味着从细微的差异到非功能性的差异（在较旧的浏览器上，尽管我认为性能优势大于一致性优势）。

尝试以下方法：

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

---

我帮你查过了

.toggleClass

不支持速度-您需要

.animate

。如果我尝试使用：console.log（$.ui）；-作为输出，我看到：未定义和这个console.log（$.ui.version）；正如我看到的：UncaughtTypeError:无法读取UndefinedMeans的属性“version”，这意味着您没有加载JQuery UI。您现在只有JQuery（base）。一旦你得到了jQueryUI，事情就应该开始了。回答：你希望看到什么样的样式变化被应用到动画中这是一个请求，如果box是heigher，那么207px，那么height是207，溢出隐藏，如果我点击按钮，那么我添加一个新类，这个类有：height:auto；是的，这应该行得通，只要尝试重新配置以确保jQueryUI库已加载。它没有被抓取（否则$.ui就不会被未定义）。现在可以很好地工作了。css文件必须在.js文件之前包含，感谢所有。。。这是一次艰难的经历：）如果您不使用jQuery UI，这是一个很好的建议。JSnippet演示不再有效。