我们可以像 CSS3 一样在 jQuery 中使用类转换吗？

Question

有没有人知道以下问题的答案。找不到解决方案让我发疯。

我想在 jQuery 中通过添加/替换一个类并在两者之间转换来制作动画，而不是使用内联样式。

这正是 CSS3 过渡的工作原理，它非常棒，可以快速制作原型。但我想在 jQuery 中执行此操作，因为我希望它在所有浏览器中都被规范化。

我使用 jQuery animate 很长时间了，但我只用它来添加内联样式。管理起来真的很麻烦，意味着我不能用 CSS 编写最终结果并将表示层与逻辑分开。

考虑以下示例。在 CSS3 中，如果我想通过更改 div 的高度来设置 div 高度的动画，我可以这样做：

1. 一个 div 有一个 .object 类，它的初始高度为 100 像素。
2. 一个事件运行，div 现在有 .object 和 .active 类。
3. 使用 .active 类，CSS 现在将高度设置为 150 像素
4. 使用 CSS3 过渡，我可以在 2 秒内通过缓动实现两者之间的平滑过渡。

如果我想在 jQuery 中做同样的事情：

1. 一个 div 有一个 .object 类，它的初始高度为 100 像素。
2. 一个事件运行，我使用 .animate 将对象的高度设置为 150 像素
3. 因此，CSS 现在使用内联样式将高度设置为 150 像素
4. 使用参数，我可以通过缓动设置以毫秒为单位的速度。

您可能知道 jQuery UI 允许在 toggleClass 和 switchClass 上进行转换：

http://jqueryui.com/demos/toggleClass/

但是，令人讨厌的是，它不适用于上面的示例，因为它仅在初始类没有设置特定高度时才有效。要对此进行测试，请检查演示中的元素并为其指定高度并观察演示中断。

希望有人能帮我解决这个问题

Answer 1

您可以尝试 DOM 突变事件，例如调度。当元素的属性发生变化时。

有一些 jQuery 插件，可以模拟事件突变的行为（尽管我没有尝试过任何这些）。

但请随意在 google 上搜索有关 jQuery 中的突变事件，这可能会对您有所帮助。

Answer 2

你可以用http://jqueryui.com/demos/switchClass/做到这一点

（几周前我也提出了类似的问题can a .classA styles to .classB styles be animated easly?）