情弱エンジニアのなかのblog

一人前のエンジニアになる為のブログです

jQueryのtoggleとfadeについて

jQueryでtoggleとfadeの使い方について調べたので記載いたします。

1. toggle

toggleの効果としまして各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものを表示状態にします。

HTML

<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>

f:id:nonaka-katuma-hal:20171205172409j:plain

ボタンを押すと表示が入れ替わるようにします

jQuery

$("button").click(function () {
  $("p").toggle();
});

ボタンを押すと以下のように変化します

f:id:nonaka-katuma-hal:20171205172708j:plain

2. fadeIn と fadeOut

fadeInは各要素の透明度を操作して、非表示の要素をフェードインさせて最終的に表示させます。 fadeOutは各要素の透明度を操作して、表示されている要素をフェードアウトさせて最終的に消します。

HTML

<button id="out">fadeOut</button>
<button id="in">fadeIn</button>

<p id="first">テキスト</p>

f:id:nonaka-katuma-hal:20171205174001j:plain

フェードするアニメーションは指定したスピードで実行されます。 ”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。 例えば”1500”であれば、1.5秒かけてアニメーションが行われます。

jQuery

$("#out").click(function () {
  $("#first").fadeOut("slow");
});

$("#in").click(function () {
  $("#first").fadeIn("slow");
});

fadeOutボタンを押すと「テキスト」が消えていきます。

f:id:nonaka-katuma-hal:20171205174110j:plain

fadeInボタンを押すと「テキスト」が表示されます。

f:id:nonaka-katuma-hal:20171205174202j:plain

3. fadeToggle

fadeToggleはフェードインとフェードアウトを切り替えるものになります。 先ほどのフェードインフェードアウトを1つのボタンで行うことが出来ます。

HTML

<button id="toggle">toggle</button>

<p id="first">テキスト</p>

f:id:nonaka-katuma-hal:20171205175400j:plain

jQuery

$("#fadeToggle").click(function () {
  $("#first").fadeToggle("slow");
});

ボタンを押すとフェードイン、フェードアウトが交互に実行されます。

f:id:nonaka-katuma-hal:20171205175440j:plain

f:id:nonaka-katuma-hal:20171205175606j:plain

といった感じになります。