animateメソッドを利用した基本的なアニメーションを説明をいたします。animateメソッドは対象とする要素のCSSプロパティを変化させることによって、アニメーションを表現します。
スポンサーリンク
下記のデモ画面で、ボタンをクリックすると四角形のオブジェクトが移動するアニメーションが見られます。アニメーションが完了した時点で、四角形の色が赤に変わります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>アニメーション</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> *{margin:0;} #sample1{height:50px; width:50px; position:relative; background:green;} </style> <head> <body> <button id="button">移動させる</button> <div id="sample1"></div> <script> $(function(){ $('#button').on('click', function(){ $('#sample1').animate({ left:'300', top:'300' }, 1000, 'swing', function(){ $(this).css('background','red'); }); }); }); </script> </body> </html> |
animateメソッド
animateメソッドの基本的な構文は下記のようになります。
|
1 |
$(セレクタ).animate({properties}, duration, easing, callback); |
{properties}
CSSのプロパティを指定すると、そのプロパティ値が適用されるまでアニメーションが行われます。widthやmarginなどの数値を扱うプロパティのみ指定できます。
margin-leftのようにハイフンを含むCSSにおいて ‘（クオテーション）で囲まない場合は、marginLeftのようにキャメルケースで記述をします。
また下記のように「+=」のように相対値を指定することもできます。
|
1 2 3 4 5 6 |
$('#sample1').animate({ left:'+=300', top:'+=300' }, 1000, 'swing', function(){ $(this).css('background','red'); }); |
duration
アニメーションが完了するまでの時間（ミリ秒）を指定します。上記例のコードでは「1000」に指定しているので、1秒（1000ミリ秒）で動作が完了するように設定されます。時間を指定しない場合（つまりデフォルト）は、400に設定されています。
ミリ秒以外では「normal」「slow」「fast」 といった文字列でも指定できます。それぞれ「400ミリ秒」「600ミリ秒」「200ミリ秒」となっています。
|
1 2 3 4 5 6 |
$('#sample1').animate({ left:'300', top:'300' }, 'slow', 'swing', function(){ $(this).css('background','red'); }); |
easing
イージングの形式（アニメーションの形式）を指定できます。jQueryではswingとlinearが選択でき、デフォルトではswingに設定されています。 swingは徐々に加速しつつまた減速し止まる挙動で、linearは等速運動です。
callback
コールバック関数です。アニメーションが完了した時点で、実行させる関数を指定します。関数内の$(this)は自身のオブジェクトで今回は$(‘#button’)を指します。
