【javascript】jQueryメソッド“animate”とは?

こんにちは。プログラム勉強中のSohです。
この記事ではjQueryを使って、アニメーションでCSSを変更する方法について記載します。

ボックスの高さや幅を徐々に変えたい…!
クリックしたら何か開くようなものを作りたい!

そんな時にはぜひこの方法をお試しください。

アニメーションでCSSを変更するjQueryメソッド

アニメーションでCSSを変更するjQueryメソッドであるanimate
使い方は animate( properties, options ) です。

1つ目の引数である properties には、アニメーションで変更したいCSSプロパティを指定します。
2つ目の引数である options には、動作時間や動作後に実行したい関数などを指定します。

具体的な記述方法

jQuery( セレクター ).animate( CSSプロパティ, 速度(ms), イージング関数名, アニメーション完了後に実行する関数 )

引数

properties:CSSプロパティ

設定できるCSSプロパティは数値型の値をとるCSSプロパティです。
アニメーションが動作したゴールを記載します。
基本的に{ キー: 値, キー:値 }という風にハッシュで指定します。

キーの記述について

単語の頭文字を大文字にする"キャメルケース"で記載します。
例えばボックスの4つの角のコーナーを丸めるborder-radiusborderRadiusと表記します。

値の記述について

値は数値を記入します。
'10px'であったり、'#ffffff'であったりです。

duration:速度

アニメーションの動作時間を指定するオプションです。
オプションなのでなくても構いません。

指定方法はミリ秒単位の秒数を数字で記入するか、'slow''normal''fast'の文字列で指定します。
数字で記入する場合は、2000と記述すると2000ミリ秒すなわち2秒間アニメーションが動作します。

easing:イージング関数名

動き方を指定するイージング関数名を記入します。
'linear''swing'の2通りを指定できるオプションです。

'linear'は一定の速度で最初から最後まで動作します。
'swing'は最初と最後はゆっくり、中盤は早めに動作します。

complete:アニメーション完了後に実行する関数

アニメーション終了後に動作させたい関数を記述するオプションです。

実装例のソースコード

では、実装例です。
150px × 150px の赤色のボックスが用意されています。
この赤色のボックスをクリックすると 200px × 200px に2秒かけてアニメーションして、アニメーション終了後に緑色になるというソースコードです。

HTML

<div id="square"></div>

CSS

#square {
  width: 150px;
  height: 150px;
  background-color: red;  
}

JavaScript

$('#square').click(function(){
  $(this).animate({
    width: '200px',
    height: '200px'
    },
    2000,
    function(){
      $(this).css('background-color', 'green');            
    }
  )
})

まとめ:jQueryのanimateとは、動的にCSSを変化させるメソッド!

この記事ではjQueryanimateメソッドについてご説明しました。
animateメソッドは動的にCSSを変化させるメソッドです。

デザインの変化をアニメーションで表現したいときに活躍しそうですね!
もし間違っている点や正確でない部分がありましたら、ご指摘いただけると大変嬉しいです。

以上、プログラム勉強中のSohでした!