ITコラム

プログラミングノウハウ

2018.09.07

#jQuery入門

jQuery【fadein】不透明度をアニメーションしてフェードイン

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

徐々に非表示にさせる際に使用する fadeOut メソッドの使用方法についてはjQuery【 fadeout 】要素をフェードアウトして非表示にをご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. fadeIn メソッド
2. fadeIn でフェードイン表示
3. フェードイン後にメッセージを表示
4. まとめ

1. fadeIn メソッド

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

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

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

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

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

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

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

.fadeIn( [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. fadeIn でフェードイン表示

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

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

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

  $("#btn2").on("click", function() {
    $("#wk_img").hide();
  });
});
//-->
</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; display:none;">
</div>

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

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

▲目次へ戻る

3. フェードイン後にメッセージを表示

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

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn3").on("click", function() {
    $("#wk_p1").fadeIn(300);
    $("#wk_p2").fadeIn(1300);
    $("#wk_p3").fadeIn(2300);
    $("#wk_p4").fadeIn(3300,  function(){alert("フェードイン終了！");});
  });

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

<div style="background-color : #CCC; height:300px; padding:20px 20px 10px;">
  <input type="button" id="btn3" value="フェードイン！">
  <input type="button" id="btn4" value="非表示">

  <p id="wk_p1" style="display:none;">１行ずつ</p>
  <p id="wk_p2" style="display:none;">時間を変えて</p>
  <p id="wk_p3" style="display:none;">フェードイン</p>
  <p id="wk_p4" style="display:none;">しています！</p>
</div>

上のサンプルでは、テキストを 1 行ずつ所要時間を変えて表示した後、最後に表示される fadeIn メソッドの第 2 引数で関数を指定してメッセージを表示しています。

▲目次へ戻る