- 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 - Appear Effect
Description
It makes an element appear. If the element was previously set to display:none; inside the style attribute of the element, the effect will automatically show the element.
It implies that display must be set within the style attribute of an object, and not in the CSS, the head of the document, or a linked file. In other words, this effect will not work if display:none; is set within the style tag or the linked CSS file.
NOTE − This effect is very similar to Opacity effect but there is a subtle difference. The Appear effect will ensure that the element is a part of the document flow before it adjusts the opacity.
So, if you want the element to remain a part of the document display while its opacity is changed, use the Opacity effect. To remove and replace the element from the document as part of a fade-out/fade-in sequences, use the Appear effect instead of Opacity.
Syntax
You can use one of the following two forms to use this effect −
new Effect.Appear('id_of_element', [options]); OR new Effect.Appear(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.Appear(element, {duration:1, from:0, to:1.0}); } function HideEffect(element){ new Effect.Appear(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 −