animate(params, [duration], [easing], [callback])

解説

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

引数

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

  指定できるスタイル

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

  キーの指定方法

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

  値の指定方法

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

  例）

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

• [duration]オプション
  String, Number: アニメーションが完了するまでの時間を指定します。 数値で指定する場合は、ミリ秒です。 また、"slow"、"normal"、"fast"の文字列で指定することもできます。
• [easing]オプション
  String: 値の変化式を指定します。初期値は"swing"です。
  "linear"を指定すると、値が線形に変化します。
  

  y = x + 初期値

  増加	減少

  
  "swing"を指定すると、値が次のCos曲線にしたがって変化します。
  

  y = (-cos(x*π)/2) + 0.5 + 初期値

  増加	減少

  
  独自のeasingを作成することもできます。 また、jQuery Easing Pluginには、様々なeasingが用意されていますので、使用してみてください。
• [callback]オプション
  Function: アニメーションが完了したときに実行されるイベントハンドラ関数を指定します。
  

戻り値

• jQuery: jQueryオブジェクト

例

例1:1.5秒間、linear easingで、高さを0、不透明度を0.2にした後、2秒間、swing easingで、高さと不透明度を元に戻します。

$("#test1_run").click(function(){
    $("#test1 .block")
        .animate({height: "hide", opacity: 0.2}, 1500, "linear")
        .animate({height: "show", opacity: 1.0}, 2000, "swing");
});

ページトップヘ

ページトップヘ