anima-fx

fx

---

fx module from zepto.

---

Effects

$.fx

Global settings for animations:

• $.fx.off (default false in browsers that support CSS transitions): set to true to disable all animate() transitions.

• $.fx.speeds: an object with duration settings for animations:

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

Change existing values or add new properties to affect animations that use a string for setting duration.

animate

• animate(properties, [duration, [easing, [function(){ ... }]]]) ⇒ self

• animate(properties, { duration: msec, easing: type, complete: fn }) ⇒ self

• animate(animationName, { ... }) ⇒ self Smoothly transition CSS properties of elements in the current collection.

• properties: object that holds CSS values to animate to; or CSS keyframe animation name

• duration (default 400): duration in milliseconds, or a string:

  • fast (200 ms)
  • slow (600 ms)
  • any custom property of $.fx.speeds

• easing (default linear): specifies the type of animation easing to use, one of:

  • ease
  • linear
  • ease-in / ease-out
  • ease-in-out
  • cubic-bezier(...)

• complete: callback function for when the animation finishes

• delay: transition delay in milliseconds v1.1+ Zepto also supports the following CSS transform properties:

• translate(X|Y|Z|3d)

• rotate(X|Y|Z|3d)

• scale(X|Y|Z)

• matrix(3d)

• perspective

• skew(X|Y)

If the duration is 0 or $.fx.off is true (default in a browser that doesn’t support CSS transitions), animations will not be executed; instead the target values will take effect instantly. Similarly, when the target CSS properties match the current state of the element, there will be no animation and the complete function won’t be called.

If the first argument is a string instead of object, it is taken as a CSS keyframe animation name.

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