column

ITコラム

mv11747

プログラミングノウハウ

2018.09.07

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

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

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

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

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

▲目次へ戻る

4. まとめ

jQueryのfadeIn メソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ