script.aculo.us - 不透明度效果

說明

此效果會逐漸將元素的不透明度更改為給定級別。你可以使用此元素來顯示或隱藏元素。

此效果從元素的當前不透明度開始（除非定義了“from”選項），並以“to”選項定義的不透明度結束，預設值為 1.0。

語法

你可以使用以下兩種形式之一來使用此效果

new Effect.Opacity('id_of_element', [options]);
OR
new Effect.Opacity(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.Opacity(element, {duration:1, from:0, to:1.0});
         }
			
         function HideEffect(element){
            new Effect.Opacity(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

列印頁面