fadeInとfadeOutでクリックするとコンテンツを出したり隠したりする簡単jQuery

クリックするとコンテンツが出る簡単な仕組みをjQueryのfadeInとfadeOutを使って作ってみました。
要素をCSSで非表示させるのではなく、jQueryのfadeInとfadeOutで非表示にさせます。
結果的にはCSSのdisplay: none;になるのですが。詳しくはこのページをご覧ください。

jQueryのfadeInとfadeOutとは

jQueryのfadeInとfadeOutは演出効果エフェクトです。
fadeInは要素をフェードインさせて表示し、fadeOutは要素をフェードアウトさせて非表示にします。
フェードインフェードアウトする時の時間を「slow」「normal」「fast」で指定することができますし、数値指定することもできます。

サンプル

jQueryでCSSで動かすコード

jQuery

<div><script type="text/javascript">
var kesu = {display: 'none'},
    jikanhaya = 1500,
    jikanoso = 3500;
jQuery(function(){
	jQuery('.btn2, .conten').css(kesu);
	jQuery('.btn1').on('click',function(){
		jQuery(this).css(kesu).fadeOut(jikanhaya)
		jQuery('.btn2').fadeIn(jikanhaya)
		jQuery('.conten').fadeIn(jikanoso);
    });
	jQuery('.btn2').on('click',function(){
		jQuery(this).css(kesu).fadeOut(jikanhaya)
		jQuery('.btn1').fadeIn(jikanhaya)
		jQuery('.conten').css(kesu).fadeOut("slow");
    });
});
</script></div>

jQueryの解説

var kesu = {display: ‘none’},
jikanhaya = 1500,
jikanoso = 3500;
は変数です。
kesu にCSSの {display: ‘none’}が格納されていて、jikanhaya に 1500、jikanoso に 3500が格納されているという事です。jikanhaya とjikanosoに格納されている1500と 3500は数値で今回の使用目的は時間・ミリ秒です。

jQuery(‘.btn2, .conten’).css(kesu);
はページを表示させた時に.btn2と .contenが変数kesuに格納されているCSSのdisplay: ‘none’で非表示が設定されているという事です。

jQuery(‘.btn1’).on(‘click’,function(){
は.btn1の要素をクリックしたらという事ですが、ここで.on()が登場します。
.on()について簡単な解説はこちら

jQuery(this).css(kesu).fadeOut(jikanhaya)
はthisは.btn1なのでクリックされたらCSSの変数kesuのdisplay: ‘none’が適用されて非表示になります。
その時にfadeOutしながら、変数jikanhayaに格納されている1500ミリ秒かけて非表示になるという事です。

jQuery(‘.btn2’).fadeIn(jikanhaya)
は.btn2の要素を.fadeInで表示させるという事です。
.btn2は6行目の
jQuery(‘.btn2, .conten’).css(kesu);
でページが開いた時に非表示になっています。
それを7行目
jQuery(‘.btn1’).on(‘click’,function(){
のクリックで、変数jikanhayaに格納されている1500ミリ秒かけて、フェードインさせながら表示するという事です。

jQuery(‘.conten’).fadeIn(jikanoso);
は.btn2と同じく.contenをフェードインさせるのですが、その時間をjikanosoで3500ミリ秒と遅くしています。
.btn2と.contenでフェートンしてくる時間が違うという設定にしています。
同じ時間でフェードインさせるなら、
jQuery(‘.btn2’).fadeIn(jikanhaya)
と
jQuery(‘.conten’).fadeIn(jikanoso)
の2行は
jQuery(‘.btn2, .conten’).fadeIn(jikanoso)
の1行で良いわけです。

jQuery(‘.btn2’).on(‘click’,function(){
jQuery(this).css(kesu).fadeOut(jikanhaya)
jQuery(‘.btn1’).fadeIn(jikanhaya)
jQuery(‘.conten’).css(kesu).fadeOut(“slow”);
は今まで解説してきた内容とほとんど同じです。
ただ.fadeOut(“slow”)でフェードアウトする時数値を入れなくても「slow」「normal」「fast」で指定できるという事です。

.on()とは

jQueryで動的に作られた要素に対しても設定したjQueryの司令を実行できる働きがあります。
まだない要素に対してその要素ができてから適用させることができます。
今回のjQueryに必要かと言われれば、新たな要素が作られるわけではないので、jQuery(‘.btn1’).click(function(){でもこちらが希望するように動くので必要ないのですが。

HTML

<div class="btn1">クリックするとコンテンツが出ます</div>
<div class="btn2">クリックするとコンテンツが隠れます</div>

<div class="conten">「クリックするとコンテンツが出ます」をクリックするとフェードアウトしながら非表示になり、「クリックするとコンテンツが隠れます」がフェードインしながら表示されてこのコンテンツが表示されます。
表示された「クリックするとコンテンツが隠れます」をクリックすると、「クリックするとコンテンツが隠れます」とこのコンテンツはフェードアウトしながら非表示になり、最初の「クリックするとコンテンツが出ます」がフェードインしながら表示されます。</div>

CSS

.btn1 {
    border: 1px solid #f9f21a;
    background-color: aqua;
    border-radius: 5px;
    padding: 0.5rem;
}
.btn2 {
    border: 3px solid #ccc;
    background-color: antiquewhite;
    border-radius: 5px;
    padding: 0.5rem;
    margin-bottom: 1rem;
}
.conten {
    border: 3px solid #ccc;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: azure;
}

まとめ

jQueryのfadeInとfadeOutは要素を出したり隠したりする専用のエフェクトです。
ここで紹介した以外にも画像やタブとコンテンツを複数作ってフェートイン・フェードアウトさせたりできます。
ただフェートイン・フェードアウトに限定されているので、使用方法としては限定的かと思います。

参考URL

jQuery リファレンス：fadeIn
jQuery リファレンス：fadeOut

fadeIn([speed], [callback]) – jQuery 日本語リファレンス
fadeOut([speed], [callback]) – jQuery 日本語リファレンス