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

列印頁面