Combination Effects > Effect.Fade

Makes an element fade away and takes it out of the document flow when the effect is complete by setting the CSS display property to none. Opposite of Effect.Appear.


Effect.Fade('id_of_element', { duration: 3.0 });

There’s also a shortcut method offered which you can call on the element itself. Note, that this will only work on Prototype-extended elements (elements you extended at least once via calling $(element)).

$('id_of_element').fade({ duration: 3.0, from: 0, to: 1 });


Options Description
duration float value, in seconds, defaults to 1.0
from float value, defaults to 1.0, percent of opacity to start
to float value, defaults to 0.0, percent of opacity to end


Can take an options parameter, to control the underlying Effect.Opacity effect.
Works safely with most HTML elements, except table rows, table bodies and table heads.

On Microsoft Internet Explorer, this effect may display a bold/ghosting artifact on elements that don’t have a defined background. It’s unclear if this is a feature or a bug.

Microsoft Internet Explorer can only set opacity on elements that have a ‘layout’. To let an element have a layout, you must set some CSS positional properties, like width or height. See Giving Elements Layout. (Note: This is fixed in V1.5_rc1.


Source code of this demo

<div id="fade_demo" style="width:80px; height:80px; background:#c2defb; border:1px solid #333;"></div>
  <li><a href="#" onclick="$('fade_demo').fade(); return false;">Click here for a demo!</a></li>
  <li><a href="#" onclick="$('fade_demo').show(); return false;">Reset</a></li>