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

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>