jQuery｢.fadeTo()｣で指定要素の透明度を変更する方法

2020年9月16日

jQueryの「.fadeTo()」は、指定要素の透明度を変更する事ができるメソッド

今回は、jQueryの「.fadeTo()」について、その使い方をサンプルを交えて解説しよう。

.fadeTo()の機能とは？

.fadeTo()の機能

.fadeTo()は、「指定要素の透明度を（変更期間を指定して徐々に）変更する」事ができる。

ただし、透明度を変更するだけであって、たとえ透明度を0にしても、要素の実体は存在するので、要素のスペースはそのまま確保される。

要素の透明度だけでなく、存在そのものを非表示にしたい場合は.fadeOut()を使う必要があるので、こちらの記事を参考にしよう。

▶ jQuery｢.hide( )/.fadeOut()｣で指定要素をフェードアウト非表示にする方法

jQueryの「.hide()/.fadeOut()」は、指定要素をフェードアウトしながら非表示にする事ができるメソッ…

.fadeTo()の構文

.fadeTo()の構文は次のような記述となる

$("セレクタ").fadeTo(期間,透明度,イージング,コールバック関数);

第１引数に「期間（ミリ秒）」、第2引数に「透明度（0~1）」は必須だが、イージングとコールバック関数は必ずしも入れる必要はなく任意となる。

引数にコールバック関数を指定できる

.fadeTo()の引数にコールバック関数を入れる事で、透明度が変わった後に何かの処理を加える事ができる。

$("セレクタ").fadeTo(3000,0.5 function(){
  // 後に加えたい処理
});

.fadeTo()の使用例

ボタンクリックで対象の透明度を変化させる例

ボタンクリックで、サンプルテキストの透明度を変化させる例で見ていこう。

HTML

<button>透明度を変更する</button>
<p class="target">サンプルテキスト</p>

jQuery

$(function(){
 $('button').on('click', function() {
  $('.target').fadeTo(1000,0.2);
 });
});

この例ではbuttonをクリックする事で、class="target"にあたる「サンプルテキスト」が1000ミリ秒（１秒）で透明度1から0.2まで変化する。

この例の実際の動きをcodePenで見てみよう。

See the Pen fadeTot()01 by stand4u (@stand4u) on CodePen.

コールバック関数を使って、透明度を変更させた後に、文字色を変える例

ボタンクリックで、サンプルテキストの透明度を変更した後、さらにコールバック関数を使ってサンプルテキストの色を赤に変更する例を見ていこう。

HTML

<button>透明度を変更する</button>
<p class="target">サンプルテキスト</p>

jQuery

$(function(){
  $('button').on('click', function() {
    $('.target').fadeTo(1000,0.4,function(){
      $(this).css("color","red");
    });
  });
});

この例ではbuttonをクリックする事で、class="target"にあたる「サンプルテキスト」が1000ミリ秒（１秒）で透明度1から透明度0.4までじょじょに変わる。

その後、コールバック関数によって、class="target"のCSSのcolorをredに変更する処理を加えている。

この例の実際の動きをcodePenで見てみよう。

See the Pen fadeTo()02 by stand4u (@stand4u) on CodePen.