- script.aculo.us Tutorial
- script.aculo.us - Home
- script.aculo.us - Overview
- script.aculo.us - Modules
- script.aculo.us - Visual Effects
- script.aculo.us - Drag & Drop
- script.aculo.us - Sorting Elements
- script.aculo.us - Create Sliders
- script.aculo.us - Auto Completion
- script.aculo.us - In-Place Editing
- script.aculo.us Resources
- script.aculo.us - Quick Guide
- script.aculo.us - Resources
- script.aculo.us - Discussion
script.aculo.us - Opacity Effect
Description
This effect gradually changes an element's opacity to a given level. You can use this element to show or hide an element.
This effect starts with the element's current opacity unless the 'from' option is defined and ends with an opacity defined by the 'to' option, defaulting to 1.0.
Syntax
You can use one of the following two forms to use this effect:
new Effect.Opacity('id_of_element', [options]); OR new Effect.Opacity(element, [options]);
Effect-Specific Parameters
This effect does not have any other parameter except common parameters.
Example
<html> <head> <title>script.aculo.us examples</title> <script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects" ></script> <script type = "text/javascript"> function ShowEffect(element){ new Effect.Opacity(element, {duration:1, from:0, to:1.0}); } function HideEffect(element){ new Effect.Opacity(element, {duration:1, from:1.0, to:0}); } </script> </head> <body> <div onclick = "ShowEffect('hideshow')"> Click me to see the line! </div> <br /> <div onclick = "HideEffect('hideshow')"> Click me to hide the line! </div> <br /> <div id = "hideshow"> LINE TO HIDE AND TO SHOW </div>. </body> </html>
This will produce following result −
scriptaculous_effects.htm
Advertisements
To Continue Learning Please Login
Login with Google