jQueryのtoggleとfadeについて
jQueryでtoggleとfadeの使い方について調べたので記載いたします。
1. toggle
toggleの効果としまして各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものを表示状態にします。
HTML
<button>Toggle</button> <p>Hello</p> <p style="display: none">Good Bye</p>
ボタンを押すと表示が入れ替わるようにします
$("button").click(function () { $("p").toggle(); });
ボタンを押すと以下のように変化します
2. fadeIn と fadeOut
fadeInは各要素の透明度を操作して、非表示の要素をフェードインさせて最終的に表示させます。 fadeOutは各要素の透明度を操作して、表示されている要素をフェードアウトさせて最終的に消します。
HTML
<button id="out">fadeOut</button> <button id="in">fadeIn</button> <p id="first">テキスト</p>
フェードするアニメーションは指定したスピードで実行されます。 ”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。 例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
$("#out").click(function () { $("#first").fadeOut("slow"); }); $("#in").click(function () { $("#first").fadeIn("slow"); });
fadeOutボタンを押すと「テキスト」が消えていきます。
fadeInボタンを押すと「テキスト」が表示されます。
3. fadeToggle
fadeToggleはフェードインとフェードアウトを切り替えるものになります。 先ほどのフェードインフェードアウトを1つのボタンで行うことが出来ます。
HTML
<button id="toggle">toggle</button> <p id="first">テキスト</p>
$("#fadeToggle").click(function () { $("#first").fadeToggle("slow"); });
ボタンを押すとフェードイン、フェードアウトが交互に実行されます。
といった感じになります。