script.aculo.us - 切換效果實用工具

說明

效果切換允許您在隱藏和顯示、向上滑動和向下滑動、以及向上內遮和向下內遮之間切換。

例如，它檢查元素是否處於隱藏狀態，然後顯示該元素。

此實用工具功能在未知或不重要的元素當前狀態的指令碼中最為有用，而只需將元素切換到相反狀態即可。

句法

為此效果使用以下語法 −

Effect.toggle( element, [effectType], [options] );

其中 effectType 是下列字串之一 −

如果 effectType 設定為 appear，則淡入和出現效果用於將元素切換到可見狀態或從可見狀態中切換出來。
如果 effectType 設定為 slide，則使用上滑和下滑效果。
如果 effectType 設定為 blind，則使用向上內遮和向下內遮效果。

如果省略 effectType，則預設設定為 appear

特定效果引數

此效果沒有通用引數之外任何其他引數。

示例

線上演示

<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 AppearEffect(element){
            new Effect.toggle(element, 'Appear', {duration:3});
         }
			
         function BUDEffect(element){
            new Effect.toggle(element,'Blind', {duration:3});
         }
			
         function SUDEffect(element){
            new Effect.toggle(element,'Slide', {duration:3});
         }
      </script>
		
   </head>
   <body>
	
      <div onclick="AppearEffect('myimage')">
         Click me to hide and show the image
      </div>
      <br />

      <div onclick="BUDEffect('myimage')">
         Click me to Blind Up and Blind Down the image
      </div>
      <br />

      <div onclick="SUDEffect('myimage')">
         Click me to Slide Up and Slide Down the image
      </div>
      <br />

      <div id="myimage" onclick="AppearEffect(this);">
         <img src = "/images/scriptaculous.gif" alt = "script.aculo.us" />
      </div>
		
   </body>
</html>

這將產生以下結果 −

scriptaculous_effects.htm

列印頁面