Effect.Opacity

Core Effects > Effect.Opacity

This effect changes an element’s opacity (transparency).

Syntax


new Effect.Opacity('id_of_element', [options]);
new Effect.Opacity(element, [options]);

Examples

A simple example


new Effect.Opacity('id_of_element', { from: 1.0, to: 0.7, duration: 0.5 });

This will fade the element from 100% to 70% over the space of 1/2 second.

Notes

Microsoft Internet Explorer can only set opacity on elements that have a ‘layout’ (see IE Element Layout).

Demo

Source code of this demo


<div id="opacity_demo" style="width:100px; height:100px; background:#ccc;"></div>
<ul>
  <li><a href="#" onclick="new Effect.Opacity('opacity_demo', { from: 1, to: 0 }); return false;">Hide this box</a></li>
  <li><a href="#" onclick="new Effect.Opacity('opacity_demo', { from: 0, to: 1 }); return false;">Show this box</a></li>
</ul>