madrobby / scriptaculous

Description:

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.

Home

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>

Last edited by joe-loco, 4 months ago