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

Question

你们中有人知道以下问题的答案吗？我找不到解决方案，这让我发疯。

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

这正是 CSS3 过渡的工作原理，它真的很棒并且允许快速原型(prototype)设计。但我想在 jQuery 中执行此操作，因为我希望它在所有浏览器中标准化。

我已经使用 jQuery animate 很长时间了，但我只用它来添加内联样式。这变得非常难以管理，并且意味着我无法用 CSS 编写最终结果并将表示层与逻辑分开。

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

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

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

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

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

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

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

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

Answer 1

您可以尝试 DOM Mutation Events，这些事件会被调度，例如。当元素的属性发生更改时。

有一些 jQuery 插件，可以模仿事件突变的行为(尽管我还没有尝试过其中任何一个)。

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