Effect.Methods
Effect.Methods is a mixin of various effects and helper functions for DOM elements.
These methods can be accessed through the $() function or through any Element object.
Syntax
$(element).methodName(arguments);
The following methods are included within Effect.Methods and can be used as a shortcut for effects, helpers, etc you might want to call on an element:
| Method Name | Description |
|---|---|
| morph(element, style, options) | starts an Effect.Morph on the element, takes style (the styles string or hash for the effect) as the first parameter, takes an optional second parameter which is the options hash for the effect |
| visualEffect(element, effect, options) | specify any of the supported effects and pass options |
| getInlineOpacity | a shortcut for Element#getInlineOpacity? |
| forceRerendering | a shortcut for Element#forceRerendering? |
| setContentZoom | a shortcut for Element#setContentZoom? |
| collectTextNodes | a shortcut for Element#collectTextNodes? |
| collectTextNodesIgnoreClass | a shortcut for Element#collectTextNodesIgnoreClass? |
| getStyles | a shortcut for Element.getStyles? |
Additional to this set of helper function, also all of scriptaculous’ Combination Effects and Core Effects are available within Effect.Methods and take the an options hash as an optional parameter:
| Method Name | Description |
|---|---|
| fade | a shortcut for Effect.Fade |
| appear | a shortcut for Effect.Appear |
| grow | a shortcut for Effect.Grow |
| shrink | a shortcut for Effect.Shrink |
| fold | a shortcut for Effect.Fold |
| blindUp | a shortcut for Effect.BlindUp |
| blindDown | a shortcut for Effect.BlindDown |
| slideUp | a shortcut for Effect.SlideUp |
| slideDown | a shortcut for Effect.SlideDown |
| pulsate | a shortcut for Effect.Pulsate |
| shake | a shortcut for Effect.Shake |
| puff | a shortcut for Effect.Puff |
| squish | a shortcut for Effect.Squish |
| switchOff | a shortcut for Effect.SwitchOff |
| dropOut | a shortcut for Effect.DropOut |
| highlight | a shortcut for Effect.Highlight |
Examples
$('id_of_element').highlight();
$('id_of_element').visualEffect('Opacity', { from: 1.0, to: 0.7, duration: 0.5 });
$('id_of_element').morph({ height: '50px', width: '200px' }, { duration: 0.5 });
$('id_of_element').fade({ delay: 0.3, duration: 0.8 });
