CORE
NATIVE
TABLE
MAKE
CUSTOMIZE
EFFECTS
effects_base.js
effects_morph.js
effects_fade.js
effects_move.js
effects_extra.js
effects_toggle.js
effects_cycle.js
effects_cycles.js
VIRTUAL BOX
PLUG-IN
effects_morph.js
Contains a collection of effects based on morph transitions, which alter the element's styles.
Contains
Class Fx.Fold, Class Fx.Shrink, Class Fx.Grow, Class Fx.Scale, Class Element
Requires
Summary
| Fx.Fold | Closes an element like a folder | |
| Fx.Shrink | Shrinks the styles of an element | |
| Fx.Grow | Enlarges the styles of an element | |
| Fx.Scale | Alters the styles you want of an element following a given scale | |
| Element | Extends the Element Class with Fx shortcuts | |
| Element.Properties | Extends the Element.Properties Hash with effects_morph.js Fx effects |
Closes an element like a folder
Extends
Fx.Morph
Constructor
new Fx.Fold (element, options)
Properties
| element | the element | |
| options | the Fx Options plus 'mode' |
Options
| mode | the effect mode. Can be 'vertical' (height transition, default) or 'horizontal' (width transition) |
Methods
| start | starts the Fx.Fold effect |
top method start
starts the Fx.Fold effect
Arguments
| mode | optional. the effect mode |
Example
var fx = new Fx.Fold('box'); fx.start();
Shrinks the styles of an element
Extends
Fx.Morph
Constructor
new Fx.Shrink (element, options)
Properties
| element | the element | |
| options | the Fx options |
Methods
| start | starts the Fx.Shrink effect |
top method start
starts the Fx.Shrink effect
Example
var fx = new Fx.Shrink('box'); fx.start();
Enlarges the styles of an element
Extends
Fx.Morph
Constructor
new Fx.Grow (element, options, values)
Properties
| element | the element | |
| options | the Fx options | |
| values | an object with 'height', 'width' and 'fontsize' keys as final values |
Methods
| start | starts the Fx.Grow effect |
top method start
starts the Fx.Grow effect
Arguments
| values | optional. the same as the values option. You can use the properties you want, with no obligation to use all of them |
Example
var fx = new Fx.Grow('box'); fx.start();
Alters the styles you want of an element following a given scale
Extends
Fx.Morph
Constructor
new Fx.Scale (element, options)
Properties
| element | the element | |
| options | the Fx options plus 'scale' |
Options
| scale | the scale. Default is 1.3 |
Methods
| start | starts the Fx.Scale effect |
top method start
starts the Fx.Scale effect
Arguments
| properties | an array which represents the properties to apply the scale to | |
| scale | optional. The scale value |
Example
var fx = new Fx.Scale('box'); fx.start(['width', 'height'], 1.4);
Extends the Element Class with Fx shortcuts.All these methods accept the same arguments of the relative Fx effect (obviously without the element)
Extends
Class Element
Methods
| fold | returns an Fx.Fold instance | |
| shrink | returns an Fx.Shrink instance | |
| grow | returns an Fx.Grow instance | |
| scale | returns an Fx.Scale instance |
top method fold
returns an Fx.Fold instance
top method shrink
returns an Fx.Shrink instance
top method grow
returns an Fx.Grow instance
top method scale
returns an Fx.Scale instance
Extends the Element.Properties Hash for using the effects_morph.js Fx Classes as Element's dynamic shortcuts with the Element.effect method
Documentation By
Riccardo Degni -
powered by MakeDocs, CMS by RD
The moo.rd documentation is released under the
Creative Commons BY-NC SA License
