Effect.SlideDown

Combination Effects > Effect.SlideDown

This effect simulates a window blind, where the contents of the affected elements scroll up and down accordingly.

Examples

Effect.SlideDown('id_of_element');
Effect.SlideDown('id_of_element', { duration: 3.0 });

Options

Option	Description
scaleX	boolean, defaults to `false`
scaleY	boolean, defaults to `true`
scaleContent	boolean, defaults to `true`
scaleFromCenter	boolean, defaults to `false`
scaleMode	string, defaults to `‘box'`, can also be `‘contents‘`
scaleFrom	integer value, percentage (0%–100%), defaults to `100`
scaleTo	integer value, percentage (0%–100%), defaults to `0`
duration	float value, in seconds, defaults to `1.0`

Notes

Include a second div element, wrapping the contents of the outer div. So, if you call new Effect.SlideDown('x');, your element must look like this:

<div id="x">
  <div>
    contents
  </div>
</div>

The target element should not have padding set, otherwise you’ll see the effect “bouncing”. (See discussion)

Because of a bug in Internet Explorer 6 (overflow not correctly hidden), an additional wrapper div is needed if you want to use these effects on absolutely positioned elements (wrapper is the absolutely positioned element, x has position:relative set):

<div id="wrapper">
  <div id="x">
    <div>
      contents
    </div>
  </div>
</div>

Works only on block elements.

In Internet Explorer 6.0 there’s a problem where floated block level elements don’t animate. If you add a position: relative to the element it all works though.

The opposite of Effect.SlideDown is Effect.SlideUp.

Demo

Source code of this demo

<div id="slidedown_demo" style="display:none; width:80px; height:80px; background:#ccc; text-align:center;">
  <div>
    This is some test content. This is some test content.
  </div>
</div>
<ul>
  <li><a href="#" onclick="Effect.SlideDown('slidedown_demo'); return false;">Click here for a demo!</a></li>
  <li><a href="#" onclick="$('slidedown_demo').hide(); return false;">Reset</a></li>
</ul>

script.aculo.us