- #JavaScript
2024.01.052024.01.12

【簡単】jQueryでアニメーション作成！サンプル付きで解説！

この記事を書いた人

まりこ

専業主婦から在宅ワーママに転身した一児の母。制作会社でコーダーとして勤務しながらフリーランスとしても活動中！

Webサイトにアニメーションをつけるにはどうしたらいいんだろう…？？

こんなお悩みありませんか？

jQueryならアニメーションも簡単に実装できますが、メソッドもたくさんあるのでどれを使えばいいのか迷いますよね…。

そこでこの記事ではjQueryを活用したアニメーションの作成方法をコードサンプル付きで解説してます！

王道のanimateメソッド（関数）の使用方法や、その他メソッドとの違い、CSSアニメーションとの使い分けについても触れています！

コーディング表現の幅を広げたい方は是非最後まで読んでくださいね♪

※メソッドってなんだっけ… という方は先にこちらの記事にも目を通しておいてください！

>> 【jQuery入門】頻出メソッド・文法の基礎を徹底解説します！

animate()の使い方

jQueryにはさまざまなメソッドがありますが、アニメーションを作成するなら細かい動きの指定も簡単にできるanimate()を使うのが便利です！

animate()の基本的な書き方は以下の通りで4つの引数を指定できます。

$(セレクタ).animate( properties, [duration], [easing], [function()])

properties（プロパティ）: CSSプロパティを指定（アニメーションの効果）
duration（速度）: アニメーションの処理時間
easing（イージング）: アニメーションの動き方、緩急
function（ファンクション）: アニメーションが終わった後の処理

properties（プロパティ）以外は指定しなくても問題ありません。

properties（プロパティ）

プロパティには動きを加えたい内容＝CSSのプロパティを記載します。アニメーション終了時の状態を指定するという覚え方でもいいです！

CSSプロパティを記述するわけですが、そのまま指定してはいけません。

ハイフン区切りの単語の場合、単語間の最初の文字を大文字にするキャメルケースという書式で記述してください。

margin-left → marginLeft
font-size → fontSize

$("セレクタ").animate({ marginLeft: "100%"});

プロパティは {}（波括弧）で囲みます。

複数のデータやプログラムをひとかたまりにまとめる場合に必要なjs文法のルールなので、まずは「こういうものだ」と覚えておきましょう！

プロパティの値はシングルまたはダブルクォーテーションで囲うのを忘れないようにしましょう。

duration（速度）

速度（デュレーション）はアニメーション開始から終了までの時間を指定します。

初期値は400ミリ秒です。

注意したいのは「秒」ではなく「ミリ秒」で指定することです。例えば1秒間で変化させたい場合は、”1000″と指定します。

$("セレクタ").animate({ marginLeft: "100%"}, 2000);

上記の場合2秒に設定したことになります。

easing（イージング）

イージング（easing）はアニメーションの動きに変化・緩急をつけるものです。デフォルトでは「linear」と「swing」が用意されています。

linear：常に一定の速度で動く
swing：最初と最後だけゆっくりで途中は速めに動く（初期値）

$("セレクタ").animate({ marginLeft: "100%"}, 2000 ,"linear");

easingもシングルまたはダブルクォーテーションで囲みます。

イージングの種類は「jQuery Easing Plugin」などを導入することでバリエーションを増やせます。

function（コールバック）

各要素のアニメーションが終わった際に実行される処理をコールバック関数で指定できます。

$("セレクタ").animate({ marginLeft: "100%" }, 3000, "linear", function () {
	$("セレクタ").animate({ marginLeft: "0%" },3000)
});

function() {　処理の内容　}の部分をコールバック関数といいます。

margin-left:100%の位置に、一定速度で3秒かけて移動
①終了後margin-left:0の位置（初期位置）に3秒かけて移動

上のコードの場合はこんな動きになります。

このコードは下の要素が連続で移動の項目でも紹介しているので実際の動きを確認してみてください。

animate()を使う際に知っておきたいこと

①animate()が使える条件

animate()は数値で指定できるCSSプロパティにしかアニメーションを設定できません。

数値指定のプロパティ例（一部）

marginやpadding
transform
opacity
font-size

基本的には要素の大きさや位置などに変化を与えたい時に使います。

②animate()を使うメリット

jQueryはメソッドチェーンで指定を連結させることができます。そのため複数のアニメーションを連続で実行させることが可能という点がメリットとしてあげられます。

メソッドチェーンとは？

メソッドチェーンとはひとつのセレクタで指定した要素に対して、複数のメソッドを適用する記述方法のことです。

.animate().css().text()というようにドットで繋げてメソッドを記述します。

animate()を使ったアニメーションサンプル

ここからはanimate()を使ったアニメーションサンプルを紹介します。これらの動きを組み合わせれば色々なアニメーションが表現できます。

CODE PENで表示確認する場合はResultの「Run PEN」をクリックしてください（リロードは右下「Return」をクリックしてください）

要素が連続で移動

See the Pen jQueryアニメーション：要素が連続で移動 by PENGIN (@cresta_design) on CodePen.

animate()をつなげて記述することで要素を連続で移動させることができます。

$(".animation1").animate({ marginLeft: "100%" }, 3000, "linear", function () {
	$(".animation1").animate({ marginLeft: "0%" }, 3000,"linear")
});

初期で左端に配置し、最初のアニメーションで右端に移動、次のアニメーションで左端に戻るアニメーションになります。

要素がフェードイン・アウト

フェードイン・フェードアウトはopacityを使うことで簡単に実装ができます。

opasityは”1″が非透明・”0″が透明なので、animate()で変化を与えています。

※画像の表示にカクツキが発生するかもしれませんが、外部サイトから読み込むCODE PENの仕様（読み込みに時間がかかる）によるものです！

フェードイン

See the Pen jQueryアニメーション：要素が連続で移動 by PENGIN (@cresta_design) on CodePen.

フェードインの場合は要素をCSSでopacity:0;とし、非表示にしておきます。

$(".fadein").animate({ opacity: "1" }, 3000, "linear");

次にanimate()でopacityを”1″にする処理を記述しています。

フェードアウト

See the Pen jQueryアニメーション：フェードアウト by PENGIN (@cresta_design) on CodePen.

フェードアウトの場合は要素をCSSでopacity:1;とし、表示しておきます。

$(".fadein").animate({ opacity: "0" }, 3000, "linear");

次にanimate()でopacityを”0″にする処理を記述します。

animate()以外でアニメーション

jQueryのメソッドにはデフォルトでアニメーションが表現しやすいものが用意されています。

ここではanimate()を使わずにアニメーションを表現できるメソッドを見てみます！

この記事もチェック！

>> 【jQuery入門】頻出メソッド・文法の基礎を徹底解説します！

show()・hide()

show()やhide()メソッドはdisplay:none;を切り替えるメソッドです。

show()：要素を表示する

See the Pen Untitled by PENGIN (@cresta_design) on CodePen.

hide()：要素を非表示にする

See the Pen jQueryアニメーション：hide()メソッド by PENGIN (@cresta_design) on CodePen.

show()やhide()の動作を一つのメソッドで切り替えることができるtoggle()メソッドというものもあります。かなり便利なメソッドなので詳しくはこちらの記事で触れてます！

>> jQueryのtoggleを活用したいろいろなUIパターンの実装方法

fadeIn() ・fadeOut( )・fadeTo()

fadeIn() ・fadeOut( )メソッドはopacityを0から1の間で切り替えるメソッドで、fadeTo()は指定したopacityの値まで変化させるメソッドです。

fadeIn()：要素をフェードインさせる

See the Pen jQueryアニメーション：fadeIn()メソッド by PENGIN (@cresta_design) on CodePen.

fadeOut( )：要素をフェードアウトさせる

See the Pen Untitled by PENGIN (@cresta_design) on CodePen.

fadeTo()：要素の透明度を、指定した値まで徐々に変化させる効果を与える

See the Pen jQueryアニメーション：fadeTo()メソッド by PENGIN (@cresta_design) on CodePen.

上の例では0.5＝50％の透過度まで変化させています。

slideDown()・slideUp()

slideDown()やslideUp()メソッドはheightの値を上下方向から切り替えることでdisplay:none;の切り替えを行い要素の表示状態に変化を与えます。

slideDown()：要素をスライドダウンで表示する

See the Pen jQueryアニメーション：slideDown()メソッド by PENGIN (@cresta_design) on CodePen.

slideUp()：要素をスライドアップで非表示にする

See the Pen jQueryアニメーション：slideUp()メソッド by PENGIN (@cresta_design) on CodePen.

このアニメーションはアコーディオンメニューに使われる動きですが、こちらの記事で詳しく解説しています。

>> 【jQuery】アコーディオンメニューの作り方解説（複数パターン紹介）

animate()とその他メソッドの使い分けは？

animate(): CSSプロパティで実現できる細かい動きの指定をしたい場合に使用
その他メソッド: メソッド特有の動きで十分な場合に使用

固有のメソッドは実装が簡単なので、凝った動きがない場合はanimate()を使う必要はないです。

実現したいアニメショーンがどのメソッドで実現できるか考えて、CSSプロパティで柔軟に指定しないといけない場合はanimate()を使うなど、状況によって判断していきましょう！

CSSアニメーションとの使い分けは？

jQueryアニメーションの特徴: ・当記事で解説したメソッドを使用して実現する
・アニメーションのトリガー（発動のキッカケ）はCSSより柔軟に指定可能
CSSアニメーションの特徴: ・ transitionやanimationプロパティを使用して処理時間を指定、その他プロパティで動きを表現する
・ jQueryアニメーションと比べて動作が軽い
・ユーザーのアクションをトリガーにする複雑な条件がある場合には実現できないことがある
　>>transitionについてはこちらの記事で解説してます！

ここまでjQueryを使ったアニメーションについて解説してきましたが、実はCSSだけでもかなり細かくアニメーションを実現はできます。

CSSで表現できるのであれば基本的にCSSで実装し、複雑な条件を指定したい場合にjQueryを使用するといいでしょう。