script.aculo.us - 显示效果

描述

它使元素显示出来。如果元素之前设置为元素 style 属性中的 display:none;，效果会自动显示元素。

它意味着 display 必须在对象的 style 属性中进行设置，而不是在 CSS、文档的头部或链接的文件中进行设置。换句话说，如果在 style 标记或链接的 CSS 文件中设置 display:none;，效果将不起作用。

注意 − 这种效果与 不透明度 效果非常相似，但是有一定的细微差别。显示效果将确保元素成为文档流的一部分，然后再调整其不透明度。

因此，如果你想让元素在不透明度发生变化时保持成为文档显示的一部分，请使用不透明度效果。要移除元素并将其替换为渐隐/渐显顺序的一部分，使用显示效果而不是 不透明度

语法

你可以使用以下两种形式之一来使用这种效果 −

new Effect.Appear('id_of_element', [options]);
OR
new Effect.Appear(element, [options]);

特定于效果的参数

此效果除了通用参数之外没有其他参数。

示例

实时演示

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

这将产生以下结果 −

scriptaculous_effects.htm

打印页面