Class: Fx

Fx.Transitions overrides the base Fx constructor, and adds the possibility to use the transition option as string.

Transition option:

The equation to use for the effect. See Fx.Transitions. It accepts both a function (ex: Fx.Transitions.Sine.easeIn) or a string ('sine:in', 'bounce:out' or 'quad:in:out') that will map to Fx.Transitions.Sine.easeIn / Fx.Transitions.Bounce.easeOut / Fx.Transitions.Quad.easeInOut

Hash: Fx.Transitions

A collection of tweening transitions for use with the Fx classes.

Примеры:

//Elastic.easeOut with default values:
var myFx = $('myElement').effect('margin', {transition: Fx.Transitions.Elastic.easeOut});

Смотрите также:

• Robert Penner's Easing Equations

Fx.Transitions Method: linear

Displays a linear transition.

Fx.Transitions Method: quad

Displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut.

Fx.Transitions Method: cubic

Displays a cubicular transition. Must be used as Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut.

Fx.Transitions Method: quart

Displays a quartetic transition. Must be used as Quart.easeIn or Quart.easeOut or Quart.easeInOut.

Fx.Transitions Method: quint

Displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut

Fx.Transitions Method: pow

Used to generate Quad, Cubic, Quart and Quint.

Note:

• The default is p^6.

Fx.Transitions Method: expo

Displays a exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut.

Fx.Transitions Method: circ

Displays a circular transition. Must be used as Circ.easeIn or Circ.easeOut or Circ.easeInOut.

Fx.Transitions Method: sine

Displays a sineousidal transition. Must be used as Sine.easeIn or Sine.easeOut or Sine.easeInOut.

Fx.Transitions Method: back

Makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut.

Fx.Transitions Method: bounce

Makes the transition bouncy. Must be used as Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.

Fx.Transitions Method: elastic

Elastic curve. Must be used as Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut

Class: Fx.Transition

This class is only useful for math geniuses who want to write their own easing equations. Returns an Fx transition function with 'easeIn', 'easeOut', and 'easeInOut' methods.

Синтаксис:

var myTransition = new Fx.Transition(transition[, params]);

Аргументы:

1. transition - (function) Can be a Fx.Transitions function or a user-provided function which will be extended with easing functions.
2. params - (mixed, optional) Single value or an array for multiple values to pass as the second parameter for the transition function.

Возвращает:

• (function) A function with easing functions.

Примеры:

//Elastic.easeOut with user-defined value for elasticity.
var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3);

var myFx = $('myElement').effect('margin', {transition: myTransition.easeOut});

Смотрите также:

• Fx.Transitions