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

Posted 2023-02-22

【中文标题】我们可以像 CSS3 一样在 jQuery 中使用类转换吗？

【英文标题】：Can we use class transitions in jQuery like with CSS3?

【发布时间】：2012-01-18 09:53:00

【问题描述】：

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

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

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

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

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

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

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

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

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

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

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

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

【参考方案1】：

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

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

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

【参考方案2】：

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

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

【讨论】：

我在问题中承认了这一点 - 如果您想保留旧课程并添加新课程怎么办？不切换。例如，我可能希望 .object 保持宽度和背景颜色，并希望 .active .object 改变高度。我很确定它不会起作用。

您需要哪些浏览器支持？

是的，所以我认为这不适合你。你可以有双重分类（.class1; .class2 然后 .class1.class2）但 IE7 不会接受它们

.class.class 在 IE7 中不受支持，但 .class .class 支持。这足以覆盖样式。您没有抓住重点，我们在这里谈论语义而不是回答问题。我希望能够在 CSS 更改之间进行转换。

很抱歉，我无法提供更多帮助...我可以为您提供使用 css3 的解决方案；抱歉，我没有看到我愿意为这个问题编程的 IE 微不足道的解决方案