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

Question

您是否知道以下问题的答案？ 无法找到解决方案使我发疯。

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

这正是CSS3过渡的工作方式，它的确很棒，并允许快速制作原型。 但我想在jQuery中完成此操作，因为我希望在所有浏览器中对其进行标准化。

我已经使用jQuery动画很长时间了，但是我只使用它来添加内联样式。 这真的很难管理，这意味着我无法用CSS编写最终结果，也无法将表示层与逻辑分离。

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

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

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

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

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

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

但是，令人讨厌的是，它不适用于上面的示例，因为它仅在初始类未设置特定高度的情况下才有效。 要对此进行测试，请检查演示中的元素并给其一个高度，然后观看演示中断。

希望有人可以帮助我

Answer 1

您可以尝试DOM突变事件，例如。 当元素的属性更改时。

有一些jQuery插件可以模仿事件突变的行为（尽管我还没有尝试过）。

但是，随时向Google询问有关jQuery中的突变事件的信息，这可能会对您有所帮助。

Answer 2

您可以使用http://jqueryui.com/demos/switchClass/

（我几周来提出了类似的问题， .classA样式与.classB样式能否轻松动画化？ ）