[jQuery] フェード処理を行う（.fadeTo）

投稿日：2017年7月17日更新日：2018年4月28日

要素のフェード処理を行うには、.fadeTo()を使用します。

サンプルソース

例）ボタンを押すと、フェード処理を行う

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(){
    // ”normal”スピードで、透過率を0.2（透過80%）にする
    $('#d1').fadeTo("normal", 0.2);
  });

  $('#btn2').click(function(){
    //”slow”スピードで、透過率を1.0（透過なし）にする
    $('#d1').fadeTo("slow", 1.0);
  });
});
</script>
<style>
#d1{
  background-color:#f0f0f0;
}
</style>
</head>
<body>
  <input type="button" id="btn1" value="ボタン１">
  <input type="button" id="btn2" value="ボタン２">
  <div id="d1">hoge</div>
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#btn1').click(function(){

// ”normal”スピードで、透過率を0.2（透過80%）にする

$('#d1').fadeTo("normal", 0.2);

});

$('#btn2').click(function(){

//”slow”スピードで、透過率を1.0（透過なし）にする

$('#d1').fadeTo("slow", 1.0);

});

</script>

<style>

#d1{

background-color:#f0f0f0;

}

</style>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、青い部分の透過率が変わります

ここが変わります。

解説

第１引数にはアニメーションのスピードを文字列または、数値で指定します。
（文字列："slow", "normal", "fast"、　数値：ミリ秒　（例：2秒の場合は2000））
第２引数には透過率を指定します。（1.0：透過なし～ 0.0：全透過)

執筆者：とら