.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. jQuery
  5. jQueryのanimateとは?animateを使ってWebページを作成しよう

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

  • jQuery
  • プログラミング言語
公開日時:   更新日時:
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を使えばとても簡単に様々なアニメーションを実現できることが分かったと思います。是非活用してください。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job