script.aculo.us-エフェクトの表示

説明

要素を表示します。要素が以前に要素のstyle属性内で_display：none; _に設定されていた場合、効果は自動的に要素を表示します。

これは、CSS、ドキュメントのヘッド、またはリンクされたファイルではなく、オブジェクトのスタイル属性内で表示を設定する必要があることを意味します。つまり、_display：none; _がスタイルタグまたはリンクされたCSSファイル内で設定されている場合、この効果は機能しません。

注-この効果は_Opacity_効果に非常に似ていますが、微妙な違いがあります。 _Appear_効果は、要素が不透明度を調整する前にドキュメントフローの一部であることを確認します。

そのため、不透明度を変更しても要素をドキュメント表示の一部として残したい場合は、不透明効果を使用します。フェードアウト/フェードインシーケンスの一部としてドキュメントから要素を削除および置換するには、_Opacity_の代わりに_Appear_効果を使用します。

構文

この効果を使用するには、次の2つの形式のいずれかを使用できます-

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

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

この効果には、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 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>

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

Script.aculo.us-scriptaculous-appear-effect

script.aculo.us-エフェクトの表示

説明

構文

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

例

目次