Effect.Shrink
Combination Effects > Effect.Shrink
“Shrinks” an element into a specific direction (see demo for better understanding), hides it when the effect is complete.
Examples
Effect.Shrink('id_of_element');
Options
| Option | Description |
|---|---|
| direction | string, defaults to 'center', can also be: 'top-left', 'top-right', 'bottom-left', 'bottom-right', the direction to “shrink” the element to |
| 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 disappear one after another.
Demo
Source code of this demo
<div id="shrink_demo" style="width:80px; height:80px; background:#ccc;"></div>
<ul>
<li><a href="#" onclick="Effect.Shrink('shrink_demo'); return false;">Click me for a demo!</a></li>
<li><a href="#" onclick="$('shrink_demo').show(); return false;">Reset</a></li>
</ul>
