JavaScript

jQueryで隠れた文字や画像を時間をフェードインさせる方法【fadeIn()】

2021/07/17

( 更新日：2022/05/17 )

jQueryで隠れた文字や画像を時間をフェードインさせる方法【fadeIn()】

jQueryを使えばHTMLのコードを変えることなく、Webページに文字や画像を消したり、表示させたりすることができます。jQueryはJavaScriptのライブラリの一種で、DOM操作をシンプル、簡単に書くことができます。

CSSも文字を非表示の文字を表示させることは可能ですが、jQueryに比べてコードが長くなります。そのため、ファイルが重くなります。SEO対策としてWebページの表示速度が大切になっている中、重いファイルを読み込んで表示が遅くなるのは避けたいとですよね。

本記事ではjQueryで隠れた文字や画像を表示させるためのfadeInメソッドの使い方について解説します。

fadeInとは

fadeinメソッドはHTMLの要素を時間をかけて表示させるためのメソッドです。PowerPointを使ったある人ならばアニメーションでフェードインをイメージしていただけると分かりやすいです。

スマホが普及した現在、Webページを大きくしてしまうと見るのが辛くなります。そのため、ユーザーが見たいと思うところだけ、fadeInメソッドを使って表示させればページ全体は小さく、欲しい情報をとることができます。

例えば、商品リストの中にある気になるものをクリックすれば画像が表示されるような機能です。

fadeInの使い方

基本構文

fadeInメソッドの基本構文は以下の通りです。

$("セレクタ").fadeIn();

セレクタにはフェードインさせたいHTMLタグ、ID、classのいずれかを指定してください。

fadeInメソッドを使うときには1つだけ注意点があります。フェードインさせたい要素は初めから非表示にすることです。非表示にするためにはCSSでdisplay:none;にするか、fadeInメソッドの前にhideメソッドを入れます。その際のコードは以下のようになります。

$("セレクタ").hide().fadeIn();

イベント処理と組み合わせる

fadeInメソッドはイベント処理と組み合わせることが多いです。基本構文で紹介したコードはページの表示、または更新とともにfadeInメソッドが動きます。しかし、クリックなどのイベント同時に動かしたい場合もあると思います。そんなときはイベント処理と組み合わせましょう。下のコードではボタンを押したらフェードインするコードです。

$('button').on('click', function () {
  $('セレクタ').fadeIn();
});

このときの注意点としてはメソッドチェーンでhide()メソッドを使わないことです。イベント処理の中に入れてしまうと、hideメソッドがイベントが発生してから動くことになります。つまり、最初から表示された状態になります。

そのため、イベント処理に組み合わせる場合は、CSSのdisplay:none;で非表示にしておくことをおすすめします。

表示する速度を変える

表示する速度を変更する場合はfadeInメソッドの引数に数字を入れます。()内の数字はfadeInメソッドが動き始めてから終了するまでの時間を示しています。コードは以下の通りです。

$('セレクタ').fadeIn(1000);

注意点として()の数字はミリ秒を示しています。つまり、秒の1/1000になります。例えば、3秒でフェードインさせたい場合は、3000を入力します。上のコードでは1000が引数なので1秒かけてフェードインさせます。

fadeOutは要素を消す【fadeOut】

fadeInと反対に要素を消すためのメソッドとしてfadeOutメソッドがあります。fadeOutメソッドは徐々に要素が消えていく動きになります。基本構文は以下の通りです。

$('セレクタ').fadeOut();

fadeOutメソッドも（）内に数字を設定することで開始から終了までの時間を設定できます。また、イベント処理と組み合わせる方法もfadeInメソッドと同じです。fadeInメソッドと一緒にfadeOutメソッドも覚えておくことをおすすめします。

注意点としては一度、フェードアウトした要素はページの更新や戻って再訪問しない限り元に戻らない点です。

fadeInとfadeOutを繰り返すにはfadeToggle

fadeInとfadeOutを繰り返すメソッドとしてfadeToggleメソッドがあります。fadeInとfadeOutメソッドは一度処理を終えるとページを更新したり、戻って再訪問しない限り元に戻ることはありません。しかし、fadeToggleを使えばfadeInとfadeToggleを繰り返すため、元に戻したり、再度動かしたりすることができます。

イベント処理と同時に使われるケースがほとんどです。イベント処理と組み合わせなければ、非表示ならば表示され、表示されているなら非表示となって動きが止まります。

基本構文は以下の通りです。

$('button').on('click', function () {
  $('セレクタ').fadeToggle();
});

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .fadein {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="fadein">
      <p>表示されました</p>
    </div>
    <button>表示</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $('button').on('click', function () {
        $('.fadein').fadeIn(1000);
      });
    </script>
  </body>
</html>