jQueryで要素をフェードイン／フェードアウトさせる方法-WEB向上中！

jQueryで要素の表示/非表示制御が簡単に行えます。またフェードインやフェードアウトといった動きのある表現も簡単に行う事ができます。
使いどころが多いと思っているこの機能ですが、使い方は凄く簡単なのでその方法をご紹介したいと思います。

要素の表示/非表示のタイミングを考える

要素の表示/非常時の使いどころが多いと書きましたが、例えばどんな時に使うかを少し考えたいと思います。

例えば細かい説明を書きたいけれども、その内容を最初から表示させていると画面が文字だらけになってしまう時など、「詳細はこちら」ボタンを用意し、それを押したら細かい内容が表示されるというパターンが考えられます。

他にもサムネイル画像をクリックしたら、拡大画像が表示されると言った事も、CSSとうまく絡むことで表現できます。そういった事例を踏まえながら組込み方法をご紹介したいと思います。

詳細な内容を表示/非表示する（show/hideメソッド）

jQueryで要素を表示/非表示するのは、対象の要素に対して「show()」「hide()」メソッドを指定するだけです。
例えばボタンを押すと詳細な内容が表示され、もう一度押すと詳細な内容が閉じる場合の設定方法です。

<p id="btn_open">商品の細かな説明を開く</p>
<p id="btn_close">商品の細かな説明閉じる</p>
 
<p id="detail">商品の細かな説明がここに入ります。<br>
例えば高さや横幅<br>
他にも機能面のすぐれた点やサービス<br>
また商品のイメージも重要です</p>

htmlで開くボタン、閉じるボタン、商品詳細を用意し、それぞれに「btn_open」「btn_close」「detail」とういid名をセットします。
btnから始まる要素が閉じる、開くボタンで、detailがボタンによって表示される内容となります。

次にCSSなどで、btn_closeとdetailを「display:none」で初期は非表示の状態としておきます。

jQueryをベースに、ボタンのクリックイベントを拾い、表示したい/消した要素をshow/hideメソッドを使って制御します。この機能を実現すると記述は以下のようになります。

$(function() {
  //内容を表示
  $('#btn_open').on('click', function() {
    $('#btn_open').hide();
    $('#btn_close').show();
    $('#detail').show();
  });
 
  //内容を非表示
  $('#btn_close').on('click', function() {
    $('#btn_open').show();
    $('#btn_close').hide();
    $('#detail').hide();
  });
});

btn_openを押すと自分を消した上で、btn_closeの閉じるボタンと、detailの内容を表示します。

btn_closeを押すと自分を消した上で、btn_openの開くボタンを表示し、detailの内容を非表示にします。こうする事で詳細な内容の表示/非表示が実現できます。

実際の動作を下記から確認してください。

商品の説明を開く

内容をフォードイン/フェードアウトする（fadeIn/fadeOutメソッド）

show/hideメソッドで要素を表示/非表示しましたが、動きとしては唐突な感じがします。
そこでfadeIn/fadeOutメソッドと登場です。このメソッドを使う事で少し時間をかけて表示非表示されます。実際の動きを確認してください。

商品の説明を開く

下記にソースコードを記載していますが、id="detail"のshowをfadeInに、hideをfadeOutに変更しているだけです。

$(function() {
  //内容を表示
  $('#btn_open').on('click', function() {
    $('#btn_open').hide();
    $('#btn_close').show();
    $('#detail').fadeIn();
  });
 
  //内容を非表示
  $('#btn_close').on('click', function() {
    $('#btn_open').show();
    $('#btn_close').hide();
    $('#detail').fadeOut();
  });
});

fadeOutやfadeInは()の中に数字を入れると、その時間をかけて画像の処理を行います。
例えば下記の場合は、detail要素のフェードアウトを1000ミリ秒かけて処理するという内容になります。表示速度をコントロールしたい場合はこのように数字を入れて制御して下さい。

  $('#detail').fadeOut(1000);

少し応用しサムネイル画像の拡大表示を実現する

よくあるサムネイル画像をクリックしたものが拡大表示され、拡大画像をクリックすると元に戻る動きです。
下の画像をクリックして見てください拡大画像が表示されます。

（解説）html部分

サムネイルと拡大画像をdiv要素で囲みidをセットします。さらにその2つを覆うようにid名を付けたdiv要素で囲みます。htmlはこれで終わりです。

<div id="image">
  <div id="sample_small">
    <img src="xxx/xxx.jpg">
  </div>
  <div id="sample_big">
    <p>画像をクリックすると閉じます</p>
    <img src="xxx/xxx.jpg">
  </div>
</div>

（解説）css部分

#image { potision: relative }
#sample_small { height: 250px; }
#sample_big {
    display: none;
    position: absolute;
    z-index:100;
    top: -50px;
    left: 15px;
    padding: 15px;
    background-color: rgba(0,0,0,0.8);
}

「#sample_small」の高さと「#sample_big」内のtop, left. padding, background-colorは見た目の表現の調整なので、サイトに合わせて良い設定を行ってください。

ポイントは以下の内容です。position: absolute で他の要素の高さなどの影響から外れています。そしてz-indexで、他の要素の後ろに隠れないように前面に出るようにしています。
もう1つポイントは「position: relative」です。これをする事でposition: absolute;の位置基準が、#image要素を基準となり表示位置をコントロールしやすくなります。

#image { position: relative }
#sample_big {
    position: absolute;
    z-index:100;
}

最後に拡大画像に対して「display: none;」で最初は消して置くようにしましょう。

#sample_big {
    display: none;
}

（解説）jQuery部分

JavaScriptの記述はいたってシンプルです。サムネイルをクリックしたときに拡大画像をフェードインで表示させ、拡大画像をクリックする事で自分をフェードアウトさせています。
jQueryでは、eventにおいて$(this)で自身のオブジェクトを呼び出せますが、もちろん「$('#sample_big').fadeOut(500);」としても問題無いです。

$(function() {
  $('#sample_small').on('click', function() {
    $('#sample_big').fadeIn(500);
  });
 
  $('#sample_big').on('click', function() {
    $(this).fadeOut(500);
  });
});

最後に

字面だけを眺めると難しく見えるかもしれまえんが、実際に触ってみるとそれほど複雑ではない事がわかると思います。
CSSの表現などをもっと加えると、より見栄え良い演出ができると思うので、様々な表現にチャレンジしてみて下さい。

jQueryで要素をフェードイン／フェードアウトさせる方法