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

Availability

script.aculo.us V1.0 and later.

Examples

  Effect.SlideDown('id_of_element');
  Effect.SlideUp('id_of_element');

  // Make the transion longer by adding options.
  Effect.SlideDown('id_of_element', {duration:3});

Demo

Click for Effect.SlideDown

Click for Effect.SlideUp

Click for Effect.SlideDown, duration:3

Options

Items in bold are default values.

• scaleX:true, false
• scaleY:true, false
• scaleContent:true, false
• scaleFrom Center:true, false
• scaleMode:‘box’,’contents’
• scaleFrom:100.0 (0%-100%)
• scaleTo:0 (0%-100%)
• duration:1

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.

See other CombinationEffects