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

Live Demo 
<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 −

scriptaculous_effects.htm
Advertisements