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.

The opposite of Effect.SlideUp is Effect.SlideDown.

Demo

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

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>