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

Availability

script.aculo.us V1.0 and later.

Syntax


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

Examples

Simple Example:


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

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 Giving Elements Layout).

Click for Demo!

Example to use in this wiki in way to present source code

Hide the source code zone

Show the source code zone


<a href='#' title='lien action' onClick='new Effect.Opacity("zoneCode", {duration:1.0, from:1.0, to:0.0});return false;'>Hide the source code zone</a>
<a href='#' title='lien action' onClick='new Effect.Opacity("zoneCode", {duration:1.0, from:0.0, to:1.0});return false;'>Show the source code zone</a>
     

This code extract can be optimized by fixing a status for the “source code printing”.