Applies visual transitions to any element. Contains Fx.Base, Fx.Style and Fx.Styles
Moo.js, Function.js, Array.js, String.js, Element.js
Valerio Proietti, http://mad4milk.net
MIT-style license.
Fx.js | Applies visual transitions to any element. |
Fx.Base | Base class for the Mootools fx library. |
Properties | |
set | Immediately sets the value with no transition. |
custom | Executes an effect from one position to the other. |
clearTimer | Stops processing the transition. |
Fx. Style | The Style effect; Extends Fx.Base, inherits all its properties. |
Properties | |
hide | Same as <Fx.Base.set>(0) |
goTo | will apply Fx.Base.custom, setting the starting point to the current position. |
Fx. Styles | Allows you to animate multiple css properties at once; Extends Fx.Base, inherits all its properties. |
Properties | |
custom | The function you’ll actually use to execute a transition. |
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $. |
Properties | |
effect | Applies an Fx.Style to the Element; This a shortcut for Fx.Style. |
effects | Applies an Fx.Styles to the Element; This a shortcut for Fx.Styles. |
Fx. Transitions | A collection of transition equations for use with the <Fx> Class. |
Properties | |
linear | |
sineInOut |
Base class for the Mootools fx library.
onStart | the function to execute as the effect begins; nothing (Class.empty) by default. |
onComplete | the function to execute after the effect has processed; nothing (Class.empty) by default. |
transition | the equation to use for the effect see Fx.Transitions; default is Fx.Transitions.sineInOut |
duration | the duration of the effect in ms; 500 is the default. |
unit | the unit is ‘px’ by default (other values include things like ‘em’ for fonts or ‘%’). |
wait | boolean: to wait or not to wait for a current transition to end before running another of the same instance. defaults to true. |
fps | the frames per second for the transition; default is 30 |
Properties | |
set | Immediately sets the value with no transition. |
custom | Executes an effect from one position to the other. |
clearTimer | Stops processing the transition. |
Immediately sets the value with no transition.
to | the point to jump to |
var myFx = new Fx.Style('myElement', 'opacity').set(0); //will make it immediately transparent
Executes an effect from one position to the other.
from | integer: staring value |
to | integer: the ending value |
var myFx = new Fx.Style('myElement', 'opacity').custom(0,1); //display a transition from transparent to opaque.
The Style effect; Extends Fx.Base, inherits all its properties. Used to transition any css property from one value to another.
el | the $(element) to apply the style transition to |
property | the property to transition |
options | the Fx.Base options (see: Fx.Base) |
var marginChange = new fx.Style('myElement', 'margin-top', {duration:500});
marginChange.custom(10, 100);
Properties | |
hide | Same as <Fx.Base.set>(0) |
goTo | will apply Fx.Base.custom, setting the starting point to the current position. |
will apply Fx.Base.custom, setting the starting point to the current position.
val | the ending value |
Allows you to animate multiple css properties at once; Extends Fx.Base, inherits all its properties.
el | the $(element) to apply the styles transition to |
options | the fx options (see: Fx.Base) |
var myEffects = new fx.Styles('myElement', {duration: 1000, transition: fx.linear});
myEffects.custom({
'height': [10, 100],
'width': [900, 300]
});
Properties | |
custom | The function you’ll actually use to execute a transition. |
A collection of transition equations for use with the <Fx> Class.
Fxtransitions.js for a whole bunch of transitions.
Easing Equations, © 2003 Robert Penner (http://www.robertpenner.com/easing/), Open Source BSD License.
returns the element passed in with all the Element prototypes applied.
function $( el )
function $A( array )