.fadeTo()（透明度の変化アニメーション）

// 透明度を指定した値まで変化させます（duration・opacity は必須）
$(selector).fadeTo(duration, opacity)

// アニメーション完了後にコールバック関数を呼び出します
$(selector).fadeTo(duration, opacity, callback)

// イージング関数を指定します
$(selector).fadeTo(duration, opacity, easing, callback)

基本的な透明度アニメーションから、速度・コールバック・イージング・ボタン操作・メソッドチェーンまで幅広い使い方を紹介します。

$(function() {

    // --- 基本的な透明度アニメーション ---

    // #box の透明度を400ミリ秒かけて0.5（半透明）まで変化させます
    $("#box").fadeTo(400, 0.5);

    // #box の透明度を600ミリ秒かけて0（完全に透明）にします
    // ※display: none にはならず、要素はレイアウト上に残ります
    $("#box").fadeTo(600, 0);

    // #box の透明度を300ミリ秒かけて1（完全に不透明）に戻します
    $("#box").fadeTo(300, 1);

    // --- 文字列で速度を指定する ---

    // "slow"（600ms）で透明度を0.3まで下げます
    $("#box").fadeTo("slow", 0.3);

    // "fast"（200ms）で透明度を1に戻します
    $("#box").fadeTo("fast", 1);

    // --- アニメーション完了後にコールバックを呼び出す ---

    // 500ミリ秒で透明度を0.2まで下げ、完了後にコンソールへメッセージを出力します
    $("#box").fadeTo(500, 0.2, function() {
        console.log("透明度の変更が完了しました");
    });

    // 透明度を0にしてから、コールバックでDOM要素を削除します
    $("#box").fadeTo(400, 0, function() {
        $(this).remove(); // 完全に透明になってから要素を取り除きます
    });

    // --- イージングを指定する ---

    // 一定速度（linear）で800ミリ秒かけて透明度を0.7にします
    $("#box").fadeTo(800, 0.7, "linear");

    // 加減速あり（swing）で600ミリ秒かけて透明度を0.5にし、完了後にログを出力します
    $("#box").fadeTo(600, 0.5, "swing", function() {
        console.log("イージング付きアニメーションが完了しました");
    });

    // --- ボタンのクリックで透明度を変更する ---

    // 「薄くする」ボタンをクリックすると #panel を半透明にします
    $("#btnFadeHalf").on("click", function() {
        $("#panel").fadeTo(400, 0.3);
    });

    // 「元に戻す」ボタンをクリックすると #panel を不透明に戻します
    $("#btnFadeBack").on("click", function() {
        $("#panel").fadeTo(400, 1);
    });

    // --- 複数の要素をまとめて透明度変更する ---

    // .item クラスを持つ要素をすべて同時に透明度0.4にします
    $(".item").fadeTo(500, 0.4);

    // --- コールバックを使って順番にアニメーションさせる ---

    // #step1 が半透明になったら #step2 を半透明にします
    $("#step1").fadeTo(400, 0.5, function() {
        $("#step2").fadeTo(400, 0.5); // #step1 完了後に #step2 を開始します
    });

    // --- メソッドチェーンの例 ---

    // .fadeTo() はjQueryオブジェクトを返すのでメソッドチェーンが使えます
    // #box を半透明にしてから、テキストを変更します
    $("#box")
        .fadeTo(300, 0.5)
        .text("半透明になりました");

});

fadeTo(400, 0) で透明にしても display:none にはならない

.fadeTo(duration, 0) で透明度を0にしても、要素は display: none にはなりません。要素はDOMレイアウト上に残り、クリックイベントも受け付け続けます。透明に見えているのにクリックが反応する原因になります。

NG: fadeTo(400, 0) で完全に非表示のつもりでいる

// NG: opacity が 0 になるが要素はレイアウト上に残りクリックも受け付ける
$("#kofCard").fadeTo(400, 0);
// 要素は見えないが、領域はそのまま残っている

OK: コールバックで hide() を呼ぶか .fadeOut() を使う

// OK: 透明になった後に hide() でレイアウトからも消す
$("#kofCard").fadeTo(400, 0, function() {
    $(this).hide();
});

// OK: .fadeOut() は opacity を 0 にした後に自動で display:none を設定する
$("#kofCard").fadeOut(400);

fadeTo() の第1引数は省略不可

.fadeIn() や .fadeOut() は引数なしで呼び出せますが、.fadeTo() は duration（速度）と opacity（目標透明度）の両方が必須です。省略するとアニメーションが機能しません。

NG: duration を省略する

// NG: 第1引数を省略すると機能しない
$("#panel").fadeTo(0.5); // 第1引数が 0.5 になり duration として解釈される

OK: duration と opacity を両方渡す

// OK: duration（ms）と opacity（0〜1）を両方指定する
$("#panel").fadeTo(400, 0.5);

// 速度の文字列も使える
$("#panel").fadeTo("slow", 0.5);

opacity が 0 のまま display は block なので fadeIn() が効かない

.fadeTo(400, 0) で opacity を 0 にした後、.fadeIn() を呼んでも要素が現れないことがあります。.fadeIn() は display: none の要素を表示するメソッドなので、opacity が 0 で display が残っている要素には反応しません。一度 .hide() で display: none にしてから .fadeIn() を呼ぶことで動作します。

NG: fadeTo(400, 0) 後に fadeIn() を呼んでも反応しない

// バイスのカードを一度透明にする
$("#vice-card").fadeTo(400, 0);

// NG: display は none になっていないので fadeIn() が動かない
$("#vice-card").fadeIn(400);

OK: hide() で display:none にしてから fadeIn() を呼ぶ

// バイスのカードを透明にしてから display:none にする
$("#vice-card").fadeTo(400, 0, function() {
    $(this).hide();
});

// OK: display:none になっているので fadeIn() で表示できる
$("#vice-card").fadeIn(400);

マチュアのカードを使った実例

「マチュア」のカードを .fadeTo() で半透明にしてからリストに戻す操作をする場合も同様です。再表示させるには .fadeTo(400, 1) で opacity を 1 に戻すか、一度 .hide() してから .fadeIn() を呼ぶかのどちらかを使います。

『.fadeTo()』はjQueryのフェードアニメーションの中で最も細かな透明度制御ができるメソッドです。.fadeIn() や .fadeOut() と異なり、透明度の目標値を0〜1の任意の数値で指定できるため、「半透明のまま止める」「徐々に透明度を上げる」といった演出が可能です。

duration（速度）と opacity（目標透明度）の両引数は省略できないことに注意してください。また、透明度を0にしても display: none は設定されないため、要素はDOMのレイアウト上に残り続けます。完全に非表示にしたい場合はコールバックで $(this).hide() を呼び出す方法や、.fadeOut() を使う方法があります。

フェードイン・フェードアウトだけで十分な場合は .fadeIn() / .fadeOut() が、表示と非表示をトグルしたい場合は .toggle() や .show() / .hide() が適しています。透明度を直接設定したい場合は .css() で opacity を指定する方法もあります。

関連ページ：.fadeIn() / .fadeOut()（フェードで表示・非表示）、.show() / .hide()（表示・非表示の切り替え）、.css()（スタイルの取得・設定）