This pair of effects simulates a window blind, where the contents of the affected elements stay in place.

Availability

script.aculo.us V1.0 and later.

Examples

  Effect.BlindDown('id_of_element');
  Effect.BlindUp('id_of_element');

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

Demo

Click for Effect.BlindDown demo

Click for Effect.BlindUp demo

Click for Effect.BlindDown, 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

Works safely with most Block Elements, except table rows, table bodies and table heads.

Also, if you would like the block hidden when someone first lands on your page, you must use the “display: none” property within the style attribute of the div/block tag, and not in the CSS class for the div. For example:

<div style="display: none" id = "id_of_element">
Blind content
</div>

and not:

#id_of_element{
 display: none;
 etc...
}

See other CombinationEffects