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

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQueryのfadeInの使い方は?fadeInというメソッドをマスターしよう!

jQueryのfadeInの使い方は?fadeInというメソッドをマスターしよう!

  • Javascript
  • jQuery
  • プログラミング言語
公開日時:   更新日時:
jQueryのfadeInの使い方は?fadeInというメソッドをマスターしよう!
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    システム
    エンジニア
    jQueryでもフェードイン演出を設定することは可能でしょうか?

    プロジェクト
    マネージャー
    もちろん可能です。時間を指定することも可能ですのでぜひマスターしてください。

    jQueryのfadeInの使い方は?

    jQueryのfadeInとは?

    jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つのfadeInは、文字通りWebページをフェードインさせることができます。フェードインの意味は、画面の絵や文字が消えている状態から、だんだんとそれが現れる演出のことです。

    なおこのページのjQueryのサンプルを実行する場合は、htmlのheadで以下のようにjQueryを読み込む設定を入れてください。jQueryのバージョンは定期的に上がるので以下が最新とは限りません。

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

    fadeInのサンプル

    それではfadeInの簡単なサンプルを解説しましょう。htmlに以下が記述されているとします。

    フェードインタイトル

    <h2>フェードインタイトル</h2>

    scriptタグ内に以下のjQuery文を記述しましょう。

    $(document).ready(function(){
        $(‘h2’).hide().fadeIn();
    });

    実行すると、文字がじわっと現れます。

    fadeInサンプルの解説

    上のJQueryサンプルのdocumentや’h2’の部分はセレクタと言います。ready、hide、fadeInがメソッドです。jQueryはセレクタに対してメソッドの処理をする、というスタイルで記述されます。$(document).ready(function(){~});はページ全体が読み込まれたらfunction内の処理をするという意味です。

    fadeInは消えているHTMLタグをだんだんと出していくメソッドのため、タグは最初消えている必要があります。そのためタグを消すhideメソッドを呼んで、その次にfadeInを呼んでいるのです。

    CSSで最初に隠す方法

    最初にhideで隠さず、以下のようにタグにCSSを指定して消しておくこともできます。一般的にはこのようにすることが多いでしょう。

    <h2 style=”display:none”>フェードインタイトル</h2>

    この場合はjQueryは以下のようにhideメソッドが不要になります。

    $(‘h2’).fadeIn();

    fadeInにパラメータを指定する

    サンプルを実行してみて、表示が速いと感じた人も多いのではないでしょうか。fadeInはパラメータに表示にかかる時間をミリ秒で指定できます。

    $(‘h2’).fadeIn(2000);

    この場合、2000ミリ秒(2秒)かけて表示されます。fadeInにはさらにfunctionを指定できます。これで表示が終わった後に処理を実行することができます。

    $(document).ready(function(){
    $(‘h2’).fadeIn(2000, function() {
    alert(“表示されました。”);
    });
    });

    これを実行すると、表示が終わった後にalertでポップアップウィンドウが表示されます。

    文字列で速度指定が可能

    fadeInには数字でなく3段階の速度を示す文字列の指定もできます。以下はゆっくりと出ます。

    $(‘h2’).fadeIn(‘slow’);

    以下は普通です。

    $(‘h2’).fadeIn(‘normal’);

    以下は高速です。

    $(‘h2’).fadeIn(‘fast’);

    フェードインの速度を統一したい場合には便利に使えるでしょう。

    fadeOutでフェードアウトもできる

    ここまで読んで勘のいい人は、フェードアウトもできるのではと思っていることでしょう。その通りで、ゆっくりと消すことも可能です。まずサンプルのスタイルシートを外しましょう。

    <h2>フェードインタイトル</h2>

    そしてjQueryを以下のようにします。

    $(document).ready(function(){
    $(‘h2’).fadeOut(2000);

    $(‘h2’).fadeIn(2000);
    });

    これで文字がゆっくりと消えた後に、また出てきます。

    アニメーションを続けることもできる

    JavaScriptにはsetIntervalという処理を定期的に実行する機能があります。JQueryを以下のようにしましょう。

    $(document).ready(function(){
    var fade = function() {
    $(‘h2’).fadeOut(1000);
    $(‘h2’).fadeIn(1000);
    }

    fade(); // 最初の1回

    setInterval(fade, 2000);
    });

    実行すると文字が点滅しつづけます。setIntervalにより2000ミリ秒毎にfadeが呼び出されます。

    fadeToggleとfadeIn・fadeOutの違い

    jQueryにはfadeIn・fadeOutに似たメソッドでfadeToggleがあります。上のサンプルのfade内を変えてみましょう。

    $(document).ready(function(){
    var fade = function() {
    $(‘h2’).fadeToggle(1000);
    }

    fade(); // 最初の1回

    setInterval(fade, 2000);
    });

    これでも同じように点滅します。fadeInは表示する、fadeOutは消えると機能が決まっていますが、fadeToggleはこれ一つで表示と非表示が自動的に切り替わってくれるという違いがあります。

    jQueryを使用せずにfadeInを実現する

    jQueryを使わずにフェードインを行う場合、どうすれば良いのでしょうか。まずHTMLを以下のように記述します。

    <h2 id=”title”>フェードインタイトル</h2>

    そして以下のCSSを記述します。

    <style>
    .fadein {
    animation : fadeIn 1s;
    animation-fill-mode: both;
    }
    @keyframes fadeIn {
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }
    </style>

    .fadeinクラスでは1秒のアニメーションで、keyframesの最初と最後を両方(both)適用することを宣言しています。opacityは透明度で、最初は0(透明)で最後は1(不透明)になるということです。

    jQueryを使わないとCSSの長いコードが必要になる

    JavaScriptは以下になります。

    <script type=”text/javascript”>
    window.onload = function() {
    const title = document.getElementById(‘title’);
    title.classList.add(‘fadein’);
    };
    </script>

    window.onloadでページを読み込んだ後に実行します。jQueryの$(document).readyと同じです。getElementByIdでidがtitleのタグを取得し、CSSのアニメーション用のクラスを追加してアニメーションを行います。実行するとfadeInのように文字が浮かび上がります。

    jQueryを使わない場合、このようにCSSのコード量が多くなります。CSSはごちゃごちゃしやすいので、CSSの記述を増やしたくない人も多いでしょう。CSSの記述が不要なjQueryを使った方がシンプルになります。

    システム
    エンジニア
    フェードアウトも設定できる便利な機能ですね。

    プロジェクト
    マネージャー
    関数を指定することでアニメーション効果を付与することもできるので、動きのあるWebページを作成することが可能です。

    jQueryのfadeInとfadeOutでお手軽アニメーション!

    jQueryのfadeInとfadeOutについて解説しましたが、ご理解頂けましたでしょうか。jQueryを使わないケースも解説することで、jQueryの便利さが分かったのではないかと思います。

    是非jQueryを活用してシンプルなコードを記述してください。

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

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

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

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

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

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

    • 充実した研修制度

      充実した研修制度

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

    • 資格取得を応援

      資格取得を応援

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

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

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

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

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

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

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

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

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

    新着案件New Job