- 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 - Fade Effect
Description
It 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.
Syntax
You can use one of the following two forms to use this effect −
new Effect.Fade('id_of_element', [options]); OR new Effect.Fade(element, [options]);
Effect-Specific Parameters
This effect does not have any other parameter except the 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 FadeEffect(element){ new Effect.Fade(element, { duration:1}); } function ShowEffect(element){ new Effect.Appear(element, {duration:1, from:1.0, to:1.0}); } </script> </head> <body> <div onclick = "FadeEffect('hideshow')"> Click me to fade out the image </div> <br /> <div onclick = "ShowEffect('hideshow')"> Click me to display the image once again </div> <br /> <div id = "hideshow"> <img src = "/images/scriptaculous.gif" alt = "script.aculo.us" /> </div> </body> </html>
This will produce following result −
scriptaculous_effects.htm
Advertisements