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>