Effect.Grow
Combination Effects > Effect.Grow
“Grows” an element into a specific direction (see demo for better understanding).
Examples
Effect.Grow('id_of_element');
Options
| Option | Description |
|---|---|
| direction | string, defaults to 'center', can also be: 'top-left', 'top-right', 'bottom-left', 'bottom-right', specifying the origin from which to “grow” the element |
| duration | float value, in seconds, defaults to 1.0 |
Notes
Works safely with most Block Elements, except tables.
You can define different durations for several div elements, and place them in a row in order to make them appear one after another.
Demo
Source code of this demo
<div id="grow_demo" style="display:none; width:80px; height:80px; background:#ccc;"></div>
<ul>
<li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Click me for a demo!</a></li>
<li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
</ul>
