Effect.SlideUp

Combination Effects > Effect.SlideUp

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

Examples

Effect.SlideUp('id_of_element');
Effect.SlideUp('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.SlideUp('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.

Demo

This is some test content. This is some test content.

• Click here for a demo!
• Reset

Source code of this demo

<div id="slideup_demo" style="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.SlideUp('slideup_demo'); return false;">Click here for a demo!</a></li>
  <li><a href="#" onclick="$('slideup_demo').show(); return false;">Reset</a></li>
</ul>