animate(params, options)

解説

カスタムアニメーションを実行します。

引数

• params
  Object: 要素を変化させるスタイルを設定します。キーと値のハッシュです。
  スタイルが段階的に変化し、最終的に設定した値になります。

  指定できるスタイル

  指定できるスタイルは、数値型の値をとるものだけです。よって、backgroundColorなどは指定することができません。

  キーの指定方法

  キーは、キャメルケース(LCC)で記述します。たとえば、margin-leftは、marginLeftと記述します。

  値の指定方法

  設定した値まで段階的に変化します。たとえば、1.5emのように記述します。 "+="と"-="を使用すれば、現在値からの相対的な値を指定することもできます。 また、"hide"、"show"、"toggle"の文字列を指定すると、対応する標準のアニメーション効果が生成されます。

  例）

  {
      width: "50%",
      left: "+=50px",
      fontSize: "1.5em",
      opacity: 0.3,
  }
  

• [options]オプション
  Object: アニメーションのオプション。キーと値のハッシュです。次のプロパティを指定することができます。
  

  プロパティ	型	初期値	説明
  duration	String, Number	400	アニメーションが完了するまでの時間を指定します。 数値で指定する場合は、ミリ秒です。 また、"slow"、"normal"、"fast"の文字列で指定することもできます。
  easing	String	"swing"	値の変化式を指定します。初期値は"swing"です。 "linear"を指定すると、値が線形に変化します。 y = x + 初期値 増加 減少 "swing"を指定すると、値が次のCos曲線にしたがって変化します。 y = (-cos(x*π)/2) + 0.5 + 初期値 増加 減少 独自のeasingを作成することもできます。 また、jQuery Easing Pluginには、様々なeasingが用意されていますので、使用してみてください。
  complete	Function	なし	アニメーションが完了したときに実行されるイベントハンドラ関数を指定します。
  step	Function	なし	値が段階的に変化しているときに実行されるイベントハンドラ関数を指定します。
  queue	Boolean	true	アニメーションの実行をキューに登録するかどうかを指定します。 trueを指定すると、複数のアニメーションをキューに登録し、順次実行します。 falseを指定すると、即座にアニメーションが実行されます。

戻り値

• jQuery: jQueryオブジェクト

例

例1:1.5秒間で、高さを"toggle"した後、「アニメーション完了」を表示します。

$("#test1_run").click(function(){
    $("#test1 .block")
        .animate(
            {height: "toggle"},
            {duration:1500, complete:function(){$("#comp").show().fadeOut(5000);}}
        );
});

ページトップヘ

ページトップヘ