【jQuery】animate()を使ってアニメーションを行う!

アニメーションを行うにはjQueryのanimate()メソッドを使用します。

jQueryのanimate()メソッドとは特定のHTML要素にアニメーションを実現してくれるメソッドで、要素のCSSプロパティを連続して変化させることができます。

animate()メソッドはパラメータにCSSプロパティを指定することで、アニメーションが行われ、CSSプロパティの他に速さや動き、アニメーション後のイベントをパラメータに指定することができます。

今回は、jQueryのanimate()メソッドを使ってアニメーションを行う方法について以下の内容で解説していきます。

⚫︎ アニメーションを瞬時に行う場合
⚫︎ 速度を指定してアニメーションを行う場合
⚫︎ 挙動を指定してアニメーションを行う場合
⚫︎ アニメーション後にイベントを行う場合

⚫︎ animate()の実践的な使い方

ハルトさん

今回はjQueryのanimate()メソッドでアニメーションを行う方法について説明していきます。

さとみさん

はい!
お願いします!

animate()とは

animate()メソッドとは特定のHTML要素にアニメーションを実現してくれるメソッドとなります。

animate()の書き方

animate()の書き方は下記となります。

パラメータ

パラメータの内容は下記となります。

⚫︎ CSSプロパティ:
アニメーション中に変化させたいCSSを指定する
(「プロパティ: 値」のようにオブジェクトリテラル型式で指定する)
⚫︎ duration:
アニメーションの時間を指定する。
デフォルトは400ms。
(ミリ秒で指定するか、「”fast”」「”slow”」「normal」の文字を指定する。)
⚫︎ easing:
動きの指定。イージング関数を指定する
(「”swing”」や「”linear”」があり、デフォルトはswing)
⚫︎ complete:
アニメーション処理完了後に呼び出す関数を指定する
(デフォルトは指定無し)

animate()メソッドのパラメータにCSSプロパティを指定することで、CSSを変化させながたアニメーションを行うことができます。

また、パラメータにdurationを指定するとアニメーションの速さを指定し、easingを指定するとアニメーションの動きを指定します。

そして、completeを指定すると、アニメーション後にイベントを発生させることができます。

アニメーションを行うサンプルコード

animate()メソッドで要素のスライドアップ/スライドダウンを行うサンプルコードを紹介します。

アニメーションを瞬時に行う場合

アニメーションを瞬時に行う場合はanimate()メソッドのパラメータにCSsプロパティを指定します。

sample.html

style.css

index.js

出力結果

animate()メソッドにCSSプロパティを指定することによって、瞬時にアニメーションを行っています。
そのため、ボタンを押すと、box1クラスの要素のプロパティが変化しています。

さとみさん

animate()メソッドのパラメータにCSSプロパティを指定することで、そのプロパティに変化することからアニメーションが行われるのですね!

ハルトさん

そうですね。
「width: “200”」のようにオブジェクトリテラル型式で指定します。
また、値を「+=200」のように「元の値から+200」というように指定することも可能です。

速度を指定してアニメーションを行う場合

速度を指定してアニメーションを行う場合はanimate()メソッドのパラメータにdurationを指定します。

sample.html

style.css

index.js

出力結果

animate()メソッドのパラメータにdurationとして速さを指定すると、アニメーション時の速さを設定しています。
そのため、ボタンを押すと、sample21クラスの要素は3秒かけてアニメーションが行われ、sample22クラスの要素は遅めにアニメーションが行われています。

さとみさん

animate()メソッドのパラメータにduraionを指定すると、アニメーションの速さを設定することができるのですね!

ハルトさん

そうですね。
デフォルトは0.4秒になるので、単純に遅くしたい場合は「slow」を設定し、単純に速くしたい場合は「fast」を文字列で指定すると良いと思います。
また、時間を指定したいのであれば、ミリ秒単位(1000ms=1秒)で指定してあげると良いですよ。

挙動を指定してアニメーションを行う場合

挙動を指定してアニメーションを行う場合はanimate()メソッドのパラメータにeasingを指定します。

sample.html

style.css

index.js

出力結果

animate()メソッドのパラメータにeasingとして動きを指定すると、アニメーションの動きを設定することができます。
そのため、ボタンを押すと、31クラスの要素はswingでアニメーションが行われ、32クラスの要素はlinearでアニメーションが行われています。

さとみさん

animate()メソッドのパラメータにeasingとして動きを指定すると、アニメーションの動きを設定することができるのですね!

ハルトさん

そうですね。
サンプルコードはswingとlinearで指定してい挙動を設定していますが、「jQuery Easing Plugin」などのjQueryプラグインを導入することで、使える動作パターンを増やすことができますよ。

アニメーション後にイベントを行う場合

アニメーション後にイベントを行う場合はanimate()メソッドのパラメータにcompleteを指定します。

sample.html

style.css

index.js

出力結果

animate()メソッドのパラメータにcompleteとして関数を指定すると、アニメーション後にイベントが行われます。
そのため、ボタンを押すと、box4クラスの要素がアニメーション後に背景色が変更されています。

さとみさん

animate()メソッドのパラメータにcompleteとして関数を指定すると、アニメーション後にイベントを行うことができるのですね!

ハルトさん

そうですね。
サンプルコードのようにanimate()メソッドの後にアクションを起こしたい場合はパラメータに関数のようなイベントハンドラを指定してあげると良いですよ。

animate()の実践的な使い方

ここでanimate()を実践的に使用している場面をい紹介します。

「TOP」ボタンにアニメーションをつける

Wedサイトを見ていると「TOP」ボタンに戻るというボタンを見たことがあるかと思いますが、animate()を使用し、アニメーションをつけることでページのトップにゆっくりと戻ることができます。

sample.html

style.css

index.js

出力結果

Topボタンを押してみるとdurationをslowに指定している為、ゆっくりとページのTopへ戻るアニメーションが行われています。
その為、何か動きを行う場合にはanimete()を使ってアニメーションを設定しましょう。

今回のポイント

animation()でアニメーションを設定

⚫︎ animate()メソッドで特定のHTML要素にアニメーションを実現してくれるメソッドである

⚫︎ アニメーションを瞬時に行う場合はanimate()のパラメータにCSSプロパティを指定する

⚫︎ 速度を指定してアニメーションを行う場合はanimate()メソッドのパラメータにdurationを指定する

⚫︎ 挙動を指定してアニメーションを行う場合はanimate()メソッドのパラメータにeasingを指定する

⚫︎ アニメーション後にイベントを行う場合はanimate()メソッドのパラメータにcompleteを指定する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し