animate(params, options)
version 1.0 以降
解説
カスタムアニメーションを実行します。
引数
-
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" を指定すると、値が線形に変化します。
|
|
増加 |
減少 |
"swing" を指定すると、値が次のCos曲線にしたがって変化します。
y = (-cos(x*π)/2) + 0.5 + 初期値
|
|
増加 |
減少 |
独自のeasing を作成することもできます。
また、jQuery Easing Pluginには、様々なeasing が用意されていますので、使用してみてください。
|
complete |
Function |
なし |
アニメーションが完了したときに実行されるイベントハンドラ関数を指定します。
|
step |
Function |
なし |
値が段階的に変化しているときに実行されるイベントハンドラ関数を指定します。 |
queue |
Boolean |
true |
アニメーションの実行をキューに登録するかどうかを指定します。
trueを指定すると、複数のアニメーションをキューに登録し、順次実行します。
falseを指定すると、即座にアニメーションが実行されます。
|
戻り値
例
例1:1.5秒間で、高さを"toggle"した後、「アニメーション完了」を表示します。
$("#test1_run").click(function(){
$("#test1 .block")
.animate(
{height: "toggle"},
{duration:1500, complete:function(){$("#comp").show().fadeOut(5000);}}
);
});
|