Effects

$.fx

全局地动画设置：

• $.fx.off (在支持css transition 的浏览器中默认为false)：设置true来禁止所有animate() transitions。

• $.fx.speeds：用来设置动画时间的对象。

  • _default (400 ms)
  • fast (200 ms)
  • slow (600 ms)

改变现有值或者添加一个新属性去影响使用一个字符串来设置时间的动画。

animate

animate(properties, [duration, [easing, [function(){ ... }]]])   => self
      animate(properties, { duration: msec, easing: type, complete: fn })   => self
      animate(animationName, { ... })   => self

对当前对象集合中元素进行css transition属性平滑过渡。

• properties: 一个对象，该对象包含了css动画的值，或者css帧动画的名称。
• duration (默认 400)：以毫秒为单位的时间，或者一个字符串。
  • fast (200 ms)
  • slow (600 ms)
  • 任何$.fx.speeds自定义属性
• easing (默认 linear)：指定动画的缓动类型，使用以下一个：
  • ease
  • linear
  • ease-in / ease-out
  • ease-in-out
  • cubic-bezier(...)
• complete：动画完成时的回调函数

delay

Zepto 还支持以下 CSS transform 属性：

• translate(X|Y|Z|3d)
• rotate(X|Y|Z|3d)
• scale(X|Y|Z)
• matrix(3d)
• perspective
• skew(X|Y)

如果duration参数为 0 或 $.fx.off 为 true(在不支持css transitions的浏览器中默认为true)，动画将不被执行；替代动画效果的目标位置会即刻生效。类似的，如果指定的动画不是通过动画完成，而且动画的目标位置即可生效。这种情况下没有动画， complete方法也不会被调用。

如果第一个参数是字符串而不是一个对象，它将被当作一个css关键帧动画 CSS keyframe animation的名称。

$("#some_element").animate({
        opacity: 0.25,
        left:
        '50px',
        color:
        '#abcdef',
        rotateZ:
        '45deg',
        translate3d: '0,10px,0'
        }, 500,
        'ease-out')

Zepto只使用css过渡效果的动画。jquery的easings不会支持。jquery的相对变化("=+10px") syntax 也不支持。请查看 list of animatable properties。浏览器的支持可能不同，所以一定要测试你所想要支持的浏览器。