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>