fadeToggle()で要素をフェードイン・フェードアウトする方法【jQuery】

先日、jQueryでスライド表示・非表示(slideDown・slideUp・slideToggle)をする方法【jQuery】でスライドで表示・非表示にする方法を解説しました。
今回は、フェードイン・フェードアウトで表示・非表示にする事が出来るfedaToggleメソッドについて解説していきます。

fadeToggleメソッドとは

fadeToggleメソッドとは、指定した要素をフェードイン・フェードアウトで表示・非表示を切り替えられるメソッドです。表示されている要素はフェードアウトしながら非表示に、非表示の要素はフェードインしながら表示に切り替えが可能です。

fadeToggleメソッドの使い方

fadeToggleメソッドの基本的な使い方は以下のようになります。

$('フェードイン・アウトさせたい要素').fadeToggle();

上記のように記述するだけで、フェードイン・フェードアウトで表示状態を変更する事が可能です。
例えば、ボタンをクリックすることでフェードさせる場合は以下のようになります。

<button class="btn">フェードイン・アウト</button>
<p class="fade_text">テキストテキストテキストテキストテキストテキストテキスト</p>

$('.btn').on('click',function(){
    $('.fade_text').fadeToggle();
});

fadeToggleメソッドで使用できる引数について

引数には、フェードの時間、イージングの種類、コールバック関数などを指定する事ができます。主に使用する引数は以下となり、各引数はカンマ区切りで指定可能です。

duration

スライドさせる時間を指定。初期値は400ミリ秒(0.4秒)。
数値の他に「“slow”」「“normal”」「“fast”」が指定可能。

// フェードイン・アウトする時間を1000ミリ秒(1秒)に指定
$('フェードイン・アウトさせたい要素').fadeToggle(1000);

easing

動き方を指定。初期値はswing。
デフォルトでは「“swing”」と「“linear”」の2つのみ指定可能。イージングを追加する場合はプラグインを読み込む必要があります。

// フェードイン・アウトする動きにlinearを指定
$('フェードイン・アウトさせたい要素').fadeToggle('linear');

complete(コールバック関数)

スライド処理後に呼び出すコールバック関数を指定。
初期値では指定無し。

// フェードイン・アウト完了後にアラート表示
$('フェードイン・アウトさせたい要素').fadeToggle(function(){
    alert('フェードイン・アウト完了');
});

fadeToggleメソッドでの他の引数についての使用については公式サイトをご覧ください。

さいごに

いかがでしたでしょうか。
今回は、fadeToggleメソッドで要素をフェードイン・フェードアウトする方法を解説しました。
toggle系のメソッドはよく使用しますので、基本的な使い方の他、コールバック関数も含めて覚えておいてもいいかと思います。