你们中有人知道以下问题的答案吗?我找不到解决方案,这让我发疯。
我想通过添加/替换类并在两者之间转换来在 jQuery 中制作动画,而不是使用内联样式。
这正是 CSS3 过渡的工作原理,它真的很棒并且允许快速原型(prototype)设计。但我想在 jQuery 中执行此操作,因为我希望它在所有浏览器中标准化。
我已经使用 jQuery animate 很长时间了,但我只用它来添加内联样式。这变得非常难以管理,并且意味着我无法用 CSS 编写最终结果并将表示层与逻辑分开。
考虑以下示例。在 CSS3 中,如果我想通过更改 div 的高度来为 div 高度设置动画,我可以这样做:
- div 有一个 .object 类,其初始高度为 100px。
- 事件运行,div 现在具有类 .object 和 .active。
- 使用 .active 类,CSS 现在将高度设置为 150px
- 使用 CSS3 过渡,我可以通过缓动在 2 秒内实现两者之间的平滑过渡。
如果我想在 jQuery 中做同样的事情:
- div 有一个 .object 类,其初始高度为 100px。
- 事件运行,我使用 .animate 将对象的高度设置为 150px
- 因此,CSS 现在使用内联样式将高度设置为 150px
- 使用参数,我可以通过缓动设置以毫秒为单位的速度。
您可能知道 jQuery UI 允许在toggleClass 和switchClass 上进行转换:
http://jqueryui.com/demos/toggleClass/
但是,令人烦恼的是,它不适用于上面的示例,因为它仅在初始类没有设置特定高度时才有效。要对此进行测试,请检查演示中的元素并为其指定高度并观看演示中断。
希望有人能帮我解决这个问题
最佳答案
您可以尝试 DOM Mutation Events,这些事件会被调度,例如。当元素的属性发生更改时。
有一些 jQuery 插件,可以模仿事件突变的行为(尽管我还没有尝试过其中任何一个)。
但是请随意在 google 上搜索 jQuery 中的突变事件,这可能会对您有所帮助。
关于jquery - 我们可以像 CSS3 一样在 jQuery 中使用类转换吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8473720/