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

我想通过添加/替换类并在两者之间过渡而不是通过使用内联样式来在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/

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

希望有人可以帮助我

===============>>#1 票数:0

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

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

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

===============>>#2 票数:0

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

(我几周来提出了类似的问题, .classA样式与.classB样式能否轻松动画化?

  ask by CarbonDry translate from so

未解决问题?本站智能推荐: