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

colmun_main11805

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

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

目次

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

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 引数で 関数を指定して メッセージを表示しています。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です