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

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

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

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

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

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

animate()の使い方

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

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

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

properties（プロパティ）

CSSプロパティを指定（アニメーションの効果）

duration（速度）

アニメーションの処理時間

easing（イージング）

アニメーションの動き方、緩急

function（ファンクション）

アニメーションが終わった後の処理

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

properties（プロパティ）

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

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

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

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

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

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

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

duration（速度）

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

初期値は400ミリ秒です。

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

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

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

easing（イージング）

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

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

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

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

function（コールバック）

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

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

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

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

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

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

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

①animate()が使える条件

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

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

②animate()を使うメリット

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

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()を使わずにアニメーションを表現できるメソッドを見てみます！

show()・hide()

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

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

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

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

fadeIn() ・fadeOut( )・fadeTo()

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

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

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

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

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

slideDown()・slideUp()

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

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

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

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

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

animate()

CSSプロパティで実現できる細かい動きの指定をしたい場合に使用

その他メソッド

メソッド特有の動きで十分な場合に使用

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

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

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

jQueryアニメーションの特徴

・ 当記事で解説したメソッドを使用して実現する
・ アニメーションのトリガー（発動のキッカケ）はCSSより柔軟に指定可能

CSSアニメーションの特徴

・ transitionやanimationプロパティを使用して処理時間を指定、その他プロパティで動きを表現する
・ jQueryアニメーションと比べて動作が軽い
・ ユーザーのアクションをトリガーにする複雑な条件がある場合には実現できないことがある
　>>transitionについてはこちらの記事で解説してます！

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

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

その他オススメのjQueryアニメーション例

jQueryを使って実装した、実務でもよく使用される汎用的なアニメーション例をご紹介します！

詳しい解説は別記事のリンクを貼ってますので是非そちらまでチェックしてみてください！

ページ内スムーススクロール

ページ内をするっとスムーズに移動するアニメーションです。animate()を使用しています。

スクロールで要素がふわっと表示

スクールに応じて要素がふわっと表示されるアニメーションです。こちらはanimate()未使用です。

フェードインスライドショー

スライドショーもjQueryアニメーションで表現することができます。こちらもanimate() は未使用です。

まとめ

今回はjQueryのanimate()やその他メソッドを使ったアニメーションの作成方法を解説しました。

CSSでは表現できない複雑な動きも、animate()などjQuery（js）を使えば簡単に実装できるようになります。

ユーザー操作をアニメーションのトリガーに設定する場合、jQueryだと「イベント」の種類を知っておく必要があります。こちらの記事で紹介しているので参考にしてみてください！

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。