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 | 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 |
| 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').morph({ height: '50px', width: '200px' }, { duration: 0.5 });
$('id_of_element').fade({ delay: 0.3, duration: 0.8 });
Recent edits
Last edited by ZenCocoon, 2 months ago
Versions:
