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を活用してシンプルなコードを記述してください。