Effect.Fade

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

Availability

script.aculo.us V1.0 and later.

Syntax

Effect.Fade('id_of_element');

Options

· | from: (defaults to current opacity or 1.0)

· | to: (defaults to 0.0)

Examples

Effect.Fade('id_of_element', { transition: Effect.Transitions.wobble })

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.

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: fixed in 1.5_rc1.)

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. See bug #4806.