jQueryのanimateとは？animateを使ってWebページを作成しよう

システム
エンジニア

animateとは動きを表現するためのメソッドでしょうか？

プロジェクト
マネージャー

そうです。アニメーションを実装するためのメソッドです。非常に簡単なコードで見栄えのするサイトを作ることができますので、ぜひマスターしてください。

jQueryのanimateとは？

jQueryはJavaScriptで利用できる豊富な機能を持つライブラリです。animateはその名の通りアニメーションができる機能で、CSSとJavaScriptで作るよりもずっと簡単に、豊富なアニメーションを表現することができます。animateはjQueryを利用する大きな理由になるでしょう。

この記事のサンプルを利用する場合は、htmlのheadタグに以下を記述してjQueryを読み込んで下さい。以下が最新版とは限りませんが、古いバージョンでも動作はします。

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

文字サイズのアニメーション

早速アニメーションの簡単なjQueryサンプルを紹介しましょう。まずhtmlに以下を記述してください。

<h2>アニメーションタイトル</h2>

そしてscriptタグに以下のjQueryを記述します。

$(document).ready(function(){
$(‘h2’).animate({fontSize: 100});
});

$(document).ready(function(){～});は、ページを読み込んだらreadyで指定したfunctionの処理を実行するという意味です。

jQueryのアニメーションは簡単

animateで指定している{fontSize: 100}はCSSで、文字サイズ100まで拡大するアニメーションを行います。実行するとアニメーションタイトルという文字がぐーんと大きくなるアニメーションを見られます。このようにjQueryのanimeteはJavaScriptよりも簡単にアニメーションを行うことができます。

また以下のようにfontSizeに文字列を指定することもできます。この場合は文字が300%まで拡大します。

$(‘h2’).animate({fontSize: ‘300%’});

animateの追加パラメータ

animateはCSSの記述以外にもパラメータを追加することができます。jQueryを以下のように変更して実行してみてください。

$(‘h2’).animate({fontSize: 100}, 3000, ‘linear’);

このようにすると3000ミリ秒（3秒）かけて等速(linear)で変化します。’linear’を’swing’に変えると動きに緩急が付きます。これは指定しない場合と同じ様な動きです。

パラメータにfunctionを指定できる

animateのパラメータには以下のようにアニメーション終了後に実行するfunctionも設定できます。以下を実行すると最後にポップアップウィンドウが表示されます。

$(‘h2’).animate({fontSize: 100}, 3000, ‘linear’,function() {
alert(“アニメーション終了”);
});

以下のようにCSSとfunctionだけを指定することも可能です。

$(‘h2’).animate({fontSize: 100}, function() {
alert(“アニメーション終了”);
});

以下のように別の場所に定義したfunctionを呼ぶこともできます。

$(‘h2’).animate({fontSize: 100}, finish_func);

function finish_func() {
alert(“アニメーション終了”);
}

文字の透明度のアニメーション

次は文字の濃さを変えるアニメーションを紹介します。

$(‘h2’).animate({opacity: 0}, 3000);
$(‘h2’).animate({opacity: 1}, 3000);

これを実行すると、文字が3000ミリ秒かけてだんだんと消えた後、まただんだんと現れます。opacityは0で透明、1で不透明なので、徐々に0に近づいた後、徐々に1になったというわけです。また数字でなく3種類の文字列の指定もできます。

$(‘h2’).animate({opacity: ‘hide’}, 1000);
$(‘h2’).animate({opacity: ‘show’}, 1000);
$(‘h2’).animate({opacity: ‘toggle’}, 1000);
$(‘h2’).animate({opacity: ‘toggle’}, 1000);

これを実行すると、hideで消えて、showで出ます。その後のtoggleは消えてるなら出る、出てるなら消えるという動作をするのでもう一度、消えた後に出るという動作をしてくれます。

縦に移動させる

次は移動をさせてみましょう。以下を実行すると、文字が200ピクセル下に移動した後に、元の場所に戻ります。

$(‘h2’).animate({marginTop: 200}, 1000);
$(‘h2’).animate({marginTop: 0}, 1000);

上のような絶対座標ではなく相対座標でも指定することができます。

$(‘h2’).animate({marginTop: ‘+=200px’}, 1000);
$(‘h2’).animate({marginTop: ‘-=50px’}, 1000);

この場合は下に200ピクセル移動した後に、上に50ピクセルだけ戻ります。

横や斜めにも移動させる

横移動にはmarginLeftを使います。以下は200ピクセル右に移動した後に戻ります。

$(‘h2’).animate({marginLeft: 200}, 1000);
$(‘h2’).animate({marginLeft: 0}, 1000);

では斜めに移動したい場合はどうすれば良いのでしょうか。実はanimateは複数のCSS属性を指定できます。以下のようにすれば、右下に移動した後に戻ります。

$(‘h2’).animate({marginLeft: 200, marginTop: 200}, 1000);
$(‘h2’).animate({marginLeft: 0, marginTop: 0}, 1000);

色のアニメーションを実現するには？

ここまで読んで、「色は変えられないの？」と思う人が多いでしょう。jQueryのanimateは色は変えられません。ただしそれを可能にするプラグインはあります。「jquery-color」というフリーのプラグインをダウンロードして利用すれば、色の変化ができます。

ネットでjquery-colorを検索してダウンロードした後、htmlのheadで以下のように読み込みます。

<script src=”jquery.color.js”></script>

jquery-colorで色のアニメーションが可能

後は以下のように色のアニメーションを行うことができます。

$(‘h2’).animate({‘color’: ‘#FF0000’}, 1000); // 赤
$(‘h2’).animate({‘color’: ‘#00FF00’}, 1000); // 緑
$(‘h2’).animate({‘color’: ‘#0000FF’}, 1000); // 青
$(‘h2’).animate({‘backgroundColor’: ‘#FF8888’}, 1000);

実行すると赤、緑、青と色が変化し、その後に背景がピンクになります。#の後の6桁は16進数（0~9の後にABCDEFとなり、その次に10になる）で、これでRGBを指定します。

システム
エンジニア

色も変化させることができますし、時間の設定もできるのですね。

プロジェクト
マネージャー

いかがでしょう。非常に簡単なメソッドです。いろいろ試してマスターしていきましょう。

jQueryのanimateで様々なアニメーションができる

jQueryのanimateを解説しましたが、ご理解頂けましたでしょうか。jQueryを使えばとても簡単に様々なアニメーションを実現できることが分かったと思います。是非活用してください。