Copyright © tutorialspoint.com

# script.aculo.us Appear Effects

## Description:

Make 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.

This means that display must be set within the style attribute of an object, and not in the CSS in the head of the document or a linked file. In other words, this Effect will not work if display:none; is set within style tag or 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 part of the document flow before it adjusts the opacity.

So, if you want the element to remain 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 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>

To understand it in better way you can Try it yourself.

Copyright © tutorialspoint.com