表示・非表示を切り替えるお手軽 jQueryメソッド 3つ

どうも、僕です。

今回はJqueryの初心者でも簡単にできるメソッドを紹介していきたいと思います。初めてJqueryを使ったとき「何て便利なんだ！！！」って感じでした。特にこれから紹介するメソッドは特に難しい知識も必要としないので是非Webサイトやブログに導入してくれたらと思います。

1.toggle()

このメソッドは表示・非表示を切り替えることができます。よくハンバーガーメニューとかクリックした時に表示されたりするものに使われてます。

対象が表示されている時は消して、消えているときは表示という作業を自動でやってくれるのでいちいち判定式を書かなくてもいい点がポイントです。

他にもshow()やhide()などのメソッドもありますが、どちらとも表示か非表示のどちらかしかしません。

$('button').click(function(){
	$('.menu').toggle();
});

※buttonがクリックされた時に「menu」クラスを持った要素の表示・非表示が切り替わります。

2.fadeToggle()

要素を徐々に表示したり、徐々に非表示にするためのメソッドです。先ほど説明したtoggle()のフェードイン・フェードアウトバージョンだと思っていただければわかりやすいと思います。
また、fadeToggle()は引数に数値（単位：ミリ秒）または「slow」、「fast」を指定することもできます。
※何も指定しないと400ミリ秒になります。

$('button').click(function(){
	$('.menu').fadeToggle();
});

※buttonがクリックされた時に「menu」クラスを持った要素の表示・非表示が徐々に切り替わります。

コールバック

fadeToggle()は第二引数にfunctionを設定することで、フェードイン・フェードアウト演出の後にfunctionを実行することができます。

$('button').click(function(){
	$('.menu').fadeToggle(1000,test);
});

function test(){
	alert("test");
};

※buttonがクリックされた時に「menu」クラスを持った要素の表示・非表示が徐々に切り替わり、その後にalertで「test」と表示されます。

イージング

「swing」、「linear」の2種類が設定できます。何も設定してない場合は「swing」になります。

swing：徐々に加速後、徐々に減速
linear：等速

$('button').click(function(){
	$('.menu').fadeToggle(1000,"linear");
});

※buttonがクリックされた時に「menu」クラスを持った要素の表示・非表示が徐々に等速で切り替わります。

3.slideToggle()

こちらもそく開閉メニューに使用されるメソッドで、要素が閉じたり開いたり（スライドダウン・スライドアップ）します。
toggleという名前がついているので、自分にスライドダウン・スライドアップを切り替えてくれます。

$('button').click(function(){
	$('.menu').slideToggle();
});

※buttonがクリックされた時に「menu」クラスを持った要素が開いたり閉じたりします。

引数はfadeToggle()と同じなので省略します。

まとめ

以上、表示・非表示を切り替えるjQueryメソッドを紹介してきましたが、まだまだ便利なjQueryメソッドはあるのでこれを機にどんどん勉強していっていただけると嬉しいです。ただパフォーマンスの問題もでてきますのであまり無駄なメソッドは使わないようにした方がいいですが。。。

では。