2015どうも、僕です。今回はJqueryの初心者でも簡単にできるメソッドを紹介していきたいと思います。Jqueryを使ったとき「何て便利なんだ!!!」って感じでした。これから紹介するメソッドは特に難しい知識も必要としないので是非Webサイトやブログに導入してくれたらと思います。目次toggle()fadeToggle()slideToggle()1.toggle()このメソッドは表示・非表示を切り替えることができます。ハンバーガーメニューとかクリックした時に表示されたりするものに使われてます。対象が表示されている時は消して、消えているときは表示という作業を自動でやってくれるのでいちいち判定式を書かなくてもいい点がポイントです。他にもshow()やhide()などのメソッドもありますが、どちらとも表示か非表示のどちらかしかしません。});123$('button').click(function(){$('.menu').toggle();});※buttonがクリックされた時に「menu」クラスを持った要素の表示・非表示が切り替わります。2.fadeToggle()要素を徐々に表示したり、徐々に非表示にするためのメソッドです。先ほど説明したtoggle()のフェードイン・フェードアウトバージョンだと思っていただければわかりやすいと思います。fadeToggle()は引数に数値(単位:ミリ秒)または「slow」、「fast」を指定することもできます。※何も指定しないと400ミリ秒になります。});123$('button').click(function(){$('.menu').fadeToggle();});※buttonがクリックされた時に「menu」クラスを持った要素の表示・非表示が徐々に切り替わります。コールバックfadeToggle()は第二引数にfunctionを設定することで、フェードイン・フェードアウト演出の後にfunctionを実行することができます。test(){alert("test");};※buttonがクリックされた時に「menu」クラスを持った要素の表示・非表示が徐々に切り替わり、その後にalertで「test」と表示されます。イージング「swing」、「linear」の2種類が設定できます。何も設定してない場合は「swing」になります。});123$('button').click(function(){$('.menu').fadeToggle(1000,"linear");});※buttonがクリックされた時に「menu」クラスを持った要素の表示・非表示が徐々に等速で切り替わります。3.slideToggle()こちらもそく開閉メニューに使用されるメソッドで、要素が閉じたり開いたり(スライドダウン・スライドアップ)します。toggleという名前がついているので、自分にスライドダウン・スライドアップを切り替えてくれます。});123$('button').click(function(){$('.menu').slideToggle();});※buttonがクリックされた時に「menu」クラスを持った要素が開いたり閉じたりします。引数はfadeToggle()と同じなので省略します。切り替えるjQueryメソッドを紹介してきましたが、まだまだ便利なjQueryメソッドはあるのでこれを機にどんどん勉強していっていただけると嬉しいです。パフォーマンスの問題もでてきますのであまり無駄なメソッドは使わないようにした方がいいですが。よろしければシェアをお願いします。デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。【WordPress】バージョン4.5にアップデートしたらa[href^=#]のエラーが出たので対処しました。YamashitaTop。