jQuery animate() メソッドを使用すると、カスタムアニメーションを作成することができます。
jQuery animate() メソッドは、カスタムアニメーションを作成するために使用します。
構文:
$(selector).animate({params},speed,callback);
必須 params パラメータは、アニメーション化するための CSS プロパティを定義します。
オプションの speed パラメータは、エフェクトの動作時間を指定します。それは次の値を取ることができます："slow"、"fast"、ミリ秒。
オプションの callback パラメータは、スライドの完了後に実行される関数です。
次の例は、animate() メソッドの簡単な使用方法のデモです： left プロパティが 250px に達するまで <div> 要素を右へ移動します：
デフォルトでは、すべての HTML 要素は静的な位置を持っており、移動することはできません。
位置を操作するには、まずは要素の CSS position プロパティを relative、fixed または absolute に設定することを忘れないでください！
複数のプロパティを同時にアニメーション化することができることに注意してください：
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Try it Yourself »
animate() メソッドで、すべての CSS プロパティを操作することは可能ですか？
はい、ほとんどは！ しかし、覚えておくべき重要な点があります：すべてのプロパティ名は、animate() メソッドで使用する場合、
キャメルケースにしなければなりません：padding-left は paddingLeft に、margin-right は marginRight になど
書き換える必要があります。
また、color アニメーションは、コア jQuery ライブラリには含まれていません。
色をアニメーション化する場合は、jQuery.comからColor Animations プラグイン
をダウンロードする必要があります。
相対値（要素の現在の値を基準にした値）で定義することも可能です。これは、値の前に += または -= 置くことによって行います：
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Try it Yourself »
"show"、"hide"、"toggle" のような値を、アニメーションのプロパティに指定することができます。
デフォルトでは、jQuery にアニメーションに対するキュー機能が付属しています。
これは、複数の animate() コールを記述した場合、jQuery はメソッドの呼出しで "内部" キューを作成することを意味します。 その後で、一つずつ呼び出されアニメーションが実行されます。
従って、アニメーションを実行した後に別なアニメーションを実行する場合は、このキュー機能を利用します：
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Try it Yourself »
下の例は、先ず <div> 要素を右に移動した後で、テキストのフォントサイズを大きくします：
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Try it Yourself »
練習問題 1 » 練習問題 2 » 練習問題 3 » 練習問題 4 »
全 jQuery エフェクトの完全な概要については、jQuery エフェクト・リファレンスをご覧ください。