Fx

Animations, transforms, and transitions for getting the most out of hardware accelerated CSS.

Tween

Transforms a CSS property's value.

syntax

x$( selector ).tween( properties, callback );

arguments

• properties Object or Array of CSS properties to tween.
  • Object is a JSON object that defines the CSS properties.
  • Array is a Object set that is tweened sequentially.
• callback Function to be called when the animation is complete. (optional).

properties

A property can be any CSS style, referenced by the JavaScript notation.

A property can also be an option from emile.js:

• duration Number of the animation in milliseconds.
• after Function is called after the animation is finished.

• easing Function allows for the overriding of the built-in animation function.

  // Receives one argument `pos` that indicates position
  // in time between animation's start and end.
  function(pos) {
      // return the new position
      return (-Math.cos(pos * Math.PI) / 2) + 0.5;
  }
  

example

// one JSON object
x$('#box').tween({ left:'100px', backgroundColor:'blue' });
x$('#box').tween({ left:'100px', backgroundColor:'blue' }, function() {
    alert('done!');
});

// array of two JSON objects
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);