Effect.SlideDown

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

 

Availability

 

script.aculo.us V1.0 and later.

 

Syntax

 

Effect.SlideDown('id_of_element');

 

Options

 

Items in bold are default values.

 

  * scaleX:true, false

  * scaleY:true, false

  * scaleContent:true, false

  * scaleFromCenter:true, false

  * scaleMode:‘box’,’contents’

  * scaleFrom:100.0 (0%-100%)

  * scaleTo:0 (0%-100%)

  * duration:1

 

Examples

 

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

 

Notes

 

You must 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>

 

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.