ITコラム

プログラミングノウハウ

2018.09.11

#jQuery入門

jQuery【fadeout】要素をフェードアウトして非表示に

jQuery の fadeOut メソッドを使用すると、画像やテキストを徐々に非表示にさせることができます。
今回は、jQuery の fadeOut メソッドの使用方法について解説いたします。

なお、徐々に表示させる際に使用する fadeIn メソッドの使用方法についてはjQuery【 fadein 】不透明度をアニメーションしてフェードインをご参照下さい。

1. fadeOut メソッド
2. fadeOut でフェードアウト
3. フェードアウト後にメッセージを表示
4. まとめ

1. fadeOut メソッド

　
fadeOut メソッドは、要素の opacity（不透明度）をアニメーションすることによって、画像やテキストを徐々に非表示にするメソッドです。

fadeOut メソッドは、引数によって 2 通りの記述方法があります。

$(セレクタ).fadeOut( [duration] [, easing] [, callback] );

$(セレクタ).fadeOut( [options] );

fadeOut メソッドの引数の内容は、それぞれ以下の通りです。

.fadeOut( [duration] [, easing] [, callback] )

duration
フェードアウトの所要時間をミリ秒又は文字列（ “fast” 又は “slow” ）で指定 “fast”：200 ミリ秒、”slow”：600 ミリ秒初期値：400
easing
フェードアウトの種類を指定初期値：swing
callback
フェードアウト後に実行する関数を指定

.fadeOut( [options] )

options
duration フェードアウトの所要時間をミリ秒又は文字列（ “fast” 又は “slow” ）で指定 “fast”：200 ミリ秒、”slow”：600 ミリ秒初期値：400
easing フェードアウトの種類を指定初期値：swing
queue エフェクトのキューに、フェードアウトを追加するか否かを指定 false の場合、フェードアウトが直ぐに開始される初期値：true
specialEasing easing（フェードアウトの種類）が指定された CSS プロパティを含むオブジェクトを指定
step フェードアウトされるプロパティのための関数を指定
progress フェードアウトの各ステップの後に実行する関数を指定
complete フェードアウト完了時に一度だけ実行する関数を指定
start フェードアウト開始時に実行する関数を指定
done フェードアウト完了時に実行する関数を指定
fail フェードアウト失敗時に実行する関数を指定
always フェードアウトが完了しても完了せずに停止しても実行する関数を指定

▲目次へ戻る

2. fadeOut でフェードアウト

　
fadeOut メソッドを使用して、画像をフェードアウトで非表示にします。
「フェードアウト！」ボタンをクリックしてみて下さい。
（「表示」ボタンをクリックすると、非表示になった画像が再表示されます。）

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn1").on("click", function() {
    $("#wk_img").fadeOut(900);
  });

  $("#btn2").on("click", function() {
    $("#wk_img").show();
  });
});
//-->
</script>

<div style="background-color : #CCC; height:300px; padding:20px 20px 10px;">
  <input type="button" id="btn1" value="フェードアウト！">
　<input type="button" id="btn2" value="表示">
　
  <img id="wk_img" src="img.jpg" style="width:200px; height:200px;">
</div>

上のサンプルでは、fadeOut メソッドの引数にフェードアウトの所要時間をミリ秒で指定しているので、900 ミリ秒かけて画像を非表示にしています。

上記のソースコードをそのまま試す場合は、画像の URL（ img 要素内の src 属性の値）にご注意下さい。
詳しくは、img要素をご参照下さい。

▲目次へ戻る

3. フェードアウト後にメッセージを表示

　
fadeOut メソッドを使用して、フェードアウト後にメッセージを表示します。
「フェードアウト！」ボタンをクリックしてみて下さい。
（「表示」ボタンをクリックすると、非表示になったテキストが再表示されます。）

3000 ミリ秒かけて
フェードアウト
します！

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn3").on("click", function() {
    $("#wk_p1").fadeOut(3000, function(){ $("#wk_p2").text("フェードアウト終了！");});
  });

  $("#btn4").on("click", function() {
    $("#wk_p1").show();
    $("#wk_p2").text("");
  });
});
//-->
</script>

<div style="background-color : #CCC; height:200px; padding:20px 20px 10px;">
  <input type="button" id="btn3" value="フェードアウト！">
　<input type="button" id="btn4" value="表示">
  <p id="wk_p1">
    3000 ミリ秒かけて
    フェードアウト
    します！
  </p>
  <p id="wk_p2" style="color:blue; font-weight:bold;"></p>
</div>

上のサンプルでは、テキストを 3000 ミリ秒かけてフェードアウトした後、fadeOut メソッドの第 2 引数で関数を指定してメッセージを表示しています。

▲目次へ戻る