【jQuery入門】animate()の使い方とアニメーション事例まとめ!

こんにちは、ライターのマサトです!

今回は、jQueryから簡単に多彩なアニメーション効果をHTML要素に付与できる「animate()」について学習していきましょう!

この記事では、

  • 「animate()」とは?
  • 「animate()」の使い方
  • 「animate()」に関数を設定する
  • 「animate()」の活用

などの基本的な内容から、応用的な使い方に関しても解説していきます。

この記事で、「animate()」をしっかり学習して自分のスキルアップを目指しましょう!

「animate()」とは?

それでは、まず最初に「animate()」について基本的な知識から学んでいきましょう!

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

例えば、単純なh1要素を用意します。

<h1>サンプルタイトル</h1>

このh1要素に対して「font-size」を80pxに指定すると、初期値から徐々に文字サイズが大きくなるアニメーションになります。もちろん、アニメーションのスピードや動きの調整も可能で、関数を使った任意の処理を実行することもできます。

ただし、「color」など数値では設定できないCSSプロパティに関しては指定できないので注意しましょう。

「animate()」の使い方

この章では、「animate()」の基本的な使い方について見ていきましょう!

一般的な構文や実際のプログラミング手法、およびオプション設定などについて学んでいきます。

基本的な構文と書き方について

まずは、基本となる構文から見ていきましょう!

「animate()」は、対象となるHTML要素にいくつかのオプションを設定して実行するのが基本となります。

対象要素.animate( CSSプロパティ, duration, easing, 関数 )

一番重要なのが第1引数に指定する「CSSプロパティ」で、それ以外は省略することが可能です。また、CSSプロパティはオブジェクト形式で記述する必要があります。

例えば、「font-size」であれば「{fontSize: 40}」のようにキャメルケースに置き換えて設定します。その他の引数に関しても、本記事で詳しく解説していきますので参考にしてみてください!

CSSを設定したアニメーション方法について

「animate()」を使った実際のプログラミング手法について見ていきましょう!

まずは、以下のように単純なHTMLを用意します。

<h1>サンプルタイトル</h1>

このh1要素に対して、文字サイズをズームアップするようなアニメーションを付与するには次のように記述します。

$('h1').animate({fontSize: 80});

animate()の引数に注目してください!

オブジェクト形式でCSSプロパティの「font-size」を設定していますよね。このように記述することで、初期値の文字サイズから80pxのサイズまでズームアップするアニメーションになります

また、数値は文字列で指定することも可能です。

$('h1').animate({fontSize: '80px'});

文字列で指定することで、「px」だけでなく「%」なども表現可能なので応用範囲は広いでしょう。

「duration」「easing」の設定方法

次に、オプション設定として「duration」「easing」についても見ていきましょう!

どちらも省略可能なオプションではありますが、有効活用することでアニメーションの動きを調整することが可能です。

duration」は、ミリ秒で指定するようになっており、アニメーションが完了するまでの時間を設定できます。

easing」は、アニメーションの挙動を指定可能で、「linear」と「swing」の2種類を文字列で設定します。

次のサンプル例を見てください!

$('h1').animate({fontSize: 80}, 2000, 'swing');

この例では、先ほどの「font-size」を利用したサンプルにdurationとeasingを追加したものです。

durationが「2000」に設定しているので、つまり2秒間かけてアニメーションが実行されるという意味になります。

また、easingには「swing」が設定されており、デフォルトよりも動きに変化があるのが分かります。

「animate()」に関数を設定する

「animate()」の引数にはコールバック関数を設定することができるので合わせてご紹介しておきます!

基本的な使い方としては、animate()の第4引数にそのまま関数を指定する方法です。

$('h1').animate({fontSize: 80}, 2000, 'linear', function() {

    console.log('アニメーションが実行されました!');

});

この例では、アニメーションが実行されたあとすぐに関数内に記述された処理が実行されます。

また、第2, 第3引数を省略した状態でも関数を設定することは可能です。

$('h1').animate({fontSize: 80}, function() {

  console.log('アニメーションが実行されました!');

});

この場合は、第2引数に関数を設定することになりますが、このようなケースでも正常に動作するように設計されています。

ちなみに、関数は無名関数だけでなく通常の関数名を指定することもできます。

$('h1').animate({fontSize: 80}, 2000, 'linear', sampleEvent);

  
function sampleEvent() {

  console.log('イベントが実行されました!');

}

この例では、「sampeEvent()」という関数を外部に作成しており、その関数名を活用してanimate()に適用しているわけです。

「animate()」の活用

この章では、「animate()」を活用したアニメーションサンプル例を見ていきましょう!

主に、CSSプロパティでよく使われる「opacity」「transform」や、画面スクロールに使える「scrollTop」の使い方を学んでいきいます。

「opacity」を使ったアニメーションサンプル

まずは、CSSプロパティの「opacity」を使ったアニメーションサンプルを作ってみましょう!

「opacity」は、数値(0 ~ 1)を指定することでHTML要素の透明度を変化させることができます。

animate()と組み合わせることで、HTML要素を少しずつ透明(非表示)にしていくアニメーションを簡単に実現できます。

次のサンプル例を見てください!

$('h1').animate({opacity: 0}, 2000);

この例では、h1要素に対してanimate()を実行しており、引数に「opacity」を指定して透明度を変化させています。

opacityは「0」が完全な透明で「1」が非透明なので、値を「0」にしておけば少しずつ透明になって消えるわけです。

また、あらかじめ用意されている固有の文字列を次のように指定することも可能です!

$('h1').animate({opacity: 'toggle'}, 2000);

この例では、opacityの値を「toggle」としており、このようにすることで透明・非透明を自動で繰り返してくれるのです。

「scrollTop」を使ったアニメーションサンプル

「scrollTop」を利用するとブラウザの画面移動をアニメーションさせることが可能になります。

そのため、例えばWebページの最下段までスクロールした時に最上部へ戻るボタンを作成するのに最適でしょう。

次のサンプル例を見てください!

$('button').click(function() {

    $('html').animate({scrollTop: 0});

})

この例では、ボタンのクリックイベント処理内でanimate()を実行しているのが分かります。引数には「scrollTop: 0」と記述されていますが、これは画面の最上部の位置に移動するという意味になります。これにより、ボタンがクリックされるとアニメーションしながら画面が最上部まで戻るアニメーションになるのです。

ちなみに、「scrollTop」の基本から応用技について次の記事でまとめているので、ぜひ参考にしてみてください!

【jQuery入門】scrollTop()で画面のスクロール位置を取得・設定する方法!
更新日 : 2019年4月3日

まとめ

今回は、jQueryでHTML要素にアニメーション効果を付与できる「animate()」について学習をしました!

最後に、もう一度ポイントをおさらいしておきましょう!

  • animate()は引数にCSSプロパティをオブジェクト形式で付与する
  • durationはミリ秒で指定し、easingは文字列で指定する
  • コールバック関数を設定するとアニメーションのあとに実行される

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説