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_fade.js
Contains a collection of effects based on fade transitions, for all fade needs.
Contains
Class Fx.Bubble, Class Fx.Fade, Class Fx.DropOut, Class Fx.Squish, Class Fx.Puff, Class Element
Requires
Summary
| Fx.Bubble | Smoothly fades and close an element horizontally or vertically | |
| Fx.Fade | Smoothly fades the element in, out or toggle. Provides a similar functionality to Element.fade but as Class | |
| Fx.DropOut | Smoothly drops an element out, either down or up | |
| Fx.Squish | Smoothly resizes an element with a 'squish' transition | |
| Fx.Puff | Smoothly fades an element with a 'puff' transition | |
| Element | Extends the Element Class with Fx shortcuts | |
| Element.Properties | Extends the Element.Properties Hash with effects_fade.js Fx effects |
Smoothly fades and close an element horizontally or vertically
Extends
Fx.Morph
Constructor
new Fx.Bubble (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.Bubble effect |
top method start
starts the Fx.Bubble effect
Arguments
| mode | optional. the effect mode |
Example
var fx = new Fx.Bubble('box'); fx.start();
Smoothly fades the element in, out or toggle. Provides a similar functionality of Element.fade but as Class
Extends
Fx.Tween
Constructor
new Fx.Fade (element, options)
Properties
| element | the element | |
| options | the Fx Options |
Methods
| start | starts the Fx.Fade effect |
top method start
starts the Fx.Fade effect
Arguments
| where | a string which can be 'in', 'out' or 'toggle' (default) |
Example
var fx = new Fx.Fade('box'); // fade in fx.start('in'); // fade out fx.start('out'); // fade toggle fx.start('toggle');
Smoothly drops an element out, either down or up
Extends
Fx.Morph
Constructor
new Fx.DropOut (element, options)
Properties
| element | the element | |
| options | the Fx Options plus some others |
Options
| size | how far the element will be dropped. Default is 40 | |
| where | the direction of the effect. Can be 'down' (default) or 'up' |
Methods
| start | starts the Fx.DropOut effect |
top method start
starts the Fx.DropOut effect
Arguments
| where | optional. Identical to the where option |
Example
var fx = new Fx.DropOut('box', {where:'up', size:140}); fx.start();
Smoothly resizes an element with a 'squish' transition
Extends
Fx.Morph
Constructor
new Fx.Squish (element, options)
Properties
| element | the element | |
| options | the Fx Options |
Methods
| start | starts the Fx.Squish effect |
top method start
starts the Fx.Squish effect
Example
var fx = new Fx.Squish('box', {duration:2000}); fx.start();
Smoothly fades an element with a 'puff' transition
Extends
Fx.Morph
Constructor
new Fx.Puff (element, options)
Properties
| element | the element | |
| options | the Fx Options plus 'increase' |
Options
| increase | The amount for increasing css properties. Default is 1.3 |
Methods
| start | starts the Fx.Puff effect |
top method start
starts the Fx.Puff effect
Arguments
| increase | optional. The amount for increasing css properties |
Example
var fx = new Fx.Puff('box', {increase: 1.6}); fx.start();
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
| bubble | returns an Fx.Bubble instance | |
| fading | returns an Fx.Fade instance | |
| dropOut | returns an Fx.DropOut instance | |
| squish | returns an Fx.Squish instance | |
| puff | return an Fx.Puff instance |
top method bubble
returns an Fx.Bubble instance
top method fading
returns an Fx.Fade instance (note that this method is called 'fading' and doesn't overwrite the 'fade' method)
top method dropOut
returns an Fx.DropOut instance
top method squish
returns an Fx.Squish instance
top method puff
returns an Fx.Puff instance
Extends the Element.Properties Hash for using the effects_fade.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
