script.aculo.us-エフェクトユーティリティの切り替え

説明

_Effect.toggle_を使用すると、非表示と表示の切り替え、上へのスライドと下へのスライド、ブラインドアップとブラインドダウンの切り替えができます。

たとえば、要素が非表示状態にあるかどうかを確認し、その要素を表示します。

このユーティリティ関数は、要素の現在の状態が不明または意味のないスクリプトで最も有用であり、要素を反対の状態に切り替えることが重要です。

構文

この効果のために次の構文を使用します-

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

_effectType_は文字列の1つです-

_effectType_が_appear_に設定されている場合、要素の表示と非表示を切り替えるために、フェード効果と外観効果が使用されます。
_effectType_が_slide_に設定されている場合、SlideUpおよびSlideDown効果が使用されます。
_effectType_が_blind_に設定されている場合、BlindUpおよびBlindDown効果が使用されます。

_effectType_が省略された場合、デフォルトは_appear_です

エフェクト固有のパラメーター

この効果には、link：/script.aculo.us/scriptaculous_common_parameters [common parameters]以外のパラメーターはありません。

例

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

これにより、次の結果が生成されます–

Script.aculo.us-scriptaculous-toggle-effect

script.aculo.us-エフェクトユーティリティの切り替え

説明

構文

エフェクト固有のパラメーター

例

目次