【jQuery】要素をフェードイン・フェードアウトさせる方法

Web サイトの演出でよく使われるのが、要素を徐々に表示・非表示にする「フェード効果」です。jQuery には fadeIn()、fadeOut()、fadeToggle() といった便利なメソッドが用意されており、わずかなコードで滑らかなアニメーションを実装できます。ここでは基本的な使い方から応用までを解説します。

fadeIn()：要素を徐々に表示する

非表示状態（display: none;）の要素を、指定した時間をかけて表示させます。

<button id="btn-show">表示</button>
<div id="box" style="display:none; width:200px; height:100px; background:skyblue;"></div>

$(function() {
  $('#btn-show').on('click', function() {
    $('#box').fadeIn(1000); // 1秒かけて表示
  });
});

fadeOut()：要素を徐々に非表示にする

表示されている要素を、指定した時間をかけて非表示にします。

<button id="btn-hide">非表示</button>
<div id="box2" style="width:200px; height:100px; background:lightcoral;"></div>

$(function() {
  $('#btn-hide').on('click', function() {
    $('#box2').fadeOut(1000); // 1秒かけて非表示
  });
});

fadeToggle()：表示と非表示を切り替える

クリックのたびに表示・非表示を切り替える場合は fadeToggle() が便利です。

<button id="btn-toggle">切り替え</button>
<div id="box3" style="width:200px; height:100px; background:lightgreen;"></div>

$(function() {
  $('#btn-toggle').on('click', function() {
    $('#box3').fadeToggle(800); // 0.8秒で表示/非表示を切り替え
  });
});

フェード効果のイージングと完了時処理

jQuery のフェード系メソッドは第2引数に 'swing' または 'linear' を指定でき、アニメーション速度を調整できます。また、第3引数にコールバック関数を渡せば、フェード終了後の処理を追加可能です。

$('#box3').fadeOut(1000, 'swing', function() {
  alert('フェードアウト完了');
});

まとめ

jQuery の fadeIn()、fadeOut()、fadeToggle() を使えば、簡単にフェードアニメーションを実装できます。表示速度や完了後の処理も指定できるため、ユーザー体験を損なわず自然な演出が可能です。フォームやモーダル、ナビゲーションの切り替えなど、さまざまなシーンで活用できるでしょう。