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 transparentExecutes 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 )