Effect.Fade
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.
Examples
Effect.Fade('id_of_element');
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();
$('id_of_element').fade({ duration: 3.0, from: 0, to: 1 });
Options
| 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 |
Notes
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.
Demo
Source code of this demo
<div id="fade_demo" style="width:80px; height:80px; background:#c2defb; border:1px solid #333;"></div>
<ul>
<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>
</ul>
