script.aculo.us-モーフ効果

説明

この効果は、要素のCSSプロパティを変更します。 CSSプロパティのセットを受け取り、要素の関連するスタイル値をこれらのターゲットに徐々に移行します。

この効果は、 style という名前の単一の特定のオプションを取ります。便宜上、次の3つの方法でターゲットスタイルの定義を表現できます-

CSSクラス名として。要素は、このクラス名のスタイル仕様に向かって変形します。
インラインスタイルの仕様として（スタイル=属性値と考えてください）。
CSSプロパティのハッシュとして。プロパティ名には、公式（ハイフンベース）とキャメル化（borderStyleなど）の両方の構文を使用できます。

注-script.aculo.usがそれをモーフィングするには、要素の元のスタイルが外部スタイルシートではなく、そのスタイル属性になければなりません。

構文

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

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

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

この効果には、リンクに加えて次のパラメーターがあります：/script.aculo.us/scriptaculous_common_parameters [common parameters]。

Sr.No	Option & Description
1	style 要素のターゲットスタイル。標準のCSS構文を使用して、またはハッシュとして記述します。

例

<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 MorphEffect(element){
            new Effect.Morph(element,
               {
                  style:'background:#f00; color: #fff; '+' border: 20px solid #f88; font-size:2em', duration:0.8}
            );
         }
      </script>
   </head>

   <body>
      <div onclick = "MorphEffect(this)">
         Click me to see the result of Morph Method
      </div>
   </body>
</html>

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

Script.aculo.us-scriptaculous-morph-effect

script.aculo.us-モーフ効果

説明

構文

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

例

目次