# Fx.js

Applies visual transitions to any element. Contains Fx.Base, Fx.Style and Fx.Styles

#### Dependencies

Moo.js, Function.js, Array.js, String.js, Element.js

#### Author

Valerio Proietti, http://mad4milk.net

#### License

MIT-style license.

Summary

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 |

## Fx.Base

Base class for the Mootools fx library.

#### Options

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

Summary

Properties |
set | Immediately sets the value with no transition.
custom | Executes an effect from one position to the other.
clearTimer | Stops processing the transition.

### Properties

### set

Immediately sets the value with no transition.

#### Arguments

to | the point to jump to

#### Example

>     var myFx = new Fx.Style('myElement', 'opacity').set(0); //will make it immediately transparent

### custom

Executes an effect from one position to the other.

#### Arguments

from | integer: staring value
to | integer: the ending value

#### Examples

>     var myFx = new Fx.Style('myElement', 'opacity').custom(0,1); //display a transition from transparent to opaque.

### clearTimer

Stops processing the transition.

## Fx. Style

The Style effect; Extends Fx.Base, inherits all its properties. Used to transition any css property from one value to another.

#### Arguments

el | the $(element) to apply the style transition to
property | the property to transition
options | the Fx.Base options (see: Fx.Base)

#### Example

>     var marginChange = new fx.Style('myElement', 'margin-top', {duration:500});
>     marginChange.custom(10, 100);

Summary

Properties |
hide | Same as <Fx.Base.set>(0)
goTo | will apply Fx.Base.custom, setting the starting point to the current position.

### Properties

### hide

Same as <Fx.Base.set>(0)

### goTo

will apply Fx.Base.custom, setting the starting point to the current position.

#### Arguments

val | the ending value

## Fx. Styles

Allows you to animate multiple css properties at once; Extends Fx.Base, inherits all its properties.

#### Arguments

el | the $(element) to apply the styles transition to
options | the fx options (see: Fx.Base)

#### Example

>     var myEffects = new fx.Styles('myElement', {duration: 1000, transition: fx.linear});
>     myEffects.custom({
>        'height': [10, 100],
>        'width': [900, 300]
>     });

Summary

Properties |
custom | The function you’ll actually use to execute a transition.

### Properties

### custom

The function you’ll actually use to execute a transition.

#### Arguments

an object

#### Example

see Fx.Styles

## Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary

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.

### Properties

### effect

Applies an Fx.Style to the Element; This a shortcut for Fx.Style.

#### Example

>     var myEffect = $('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear});
>     myEffect.custom(10, 100);

### effects

Applies an Fx.Styles to the Element; This a shortcut for Fx.Styles.

#### Example

>     var myEffects = $(myElement).effects({duration: 1000, transition: Fx.Transitions.sineInOut});
>     myEffects.custom({'height': [10, 100], 'width': [900, 300]});

## Fx. Transitions

A collection of transition equations for use with the <Fx> Class.

#### See Also

Fxtransitions.js for a whole bunch of transitions.

#### Credits

Easing Equations, © 2003 Robert Penner (http://www.robertpenner.com/easing/), Open Source BSD License.

Summary

Properties |
linear |
sineInOut |

### Properties

### linear

### sineInOut

Base class for the Mootools fx library.
Executes an effect from one position to the other.

> function $( | el | )

returns the element passed in with all the Element prototypes applied.
The Style effect; Extends <Fx.Base>, inherits all its properties.
Allows you to animate multiple css properties at once; Extends <Fx.Base>, inherits all its properties.
My Object Oriented javascript.
Contains Function prototypes, utility functions and Chain.

> function $A( | array | )

Copy the array and returns it.
Same as Array.copy, but as function.
Contains Array prototypes and the function $A;
Contains String prototypes and Number prototypes.
Contains useful Element prototypes, to be used with the dollar function $.
Returns an empty function
A collection of transition equations for use with the <Fx> Class.
Cool transitions, to be used with <Fx.Js>