むねひろ@プログラマープログラマーの技術や経験の暴露ブログです。何か聞きたいことがあれば遠慮なくご連絡ください。munehirojQueryで表示・非表示を操作する方法3選ツイートシェアはてブLINEPocketjQueryを使ってHTML要素の表示・非表示をする方法です。スマホで表示時のメニューの開閉などに使えます。これは、クラスの追加・削除やスタイルの追加・削除でも対応出来ますが、jQueryには表示・非表示のための機能が既にあるためそれを使ったほうがコードがすっきりして便利です。Default$('#idname').show();1$('#idname').show();引数に数値を入れると表示されるまでの時間になります。数値はミリ秒単位で入力します。Default$('#idname').show(2000);1$('#idname').show(2000);のように書くと2000ミリ秒(2秒)かけてなめらかに表示されるようになります。Default$('#idname').hide();1$('#idname').hide();こちらも引数に数値を入れると非表示になるまでの時間になります。Default$('#idname').hide(2000);1$('#idname').hide(2000);上の例は2000ミリ秒(2秒)かけて非表示にします。設定することで非表示になります。削除することで表示します。今表示されているかどうかの判定は以下のように書くことが出来ます。こちらは、表示時は非表示にする処理を、非表示時は表示する処理を実行してくれます。連続でクリックした場合は表示・非表示が繰り返されます。ちなみにこちらも引数に数値を入れるとミリ病単位で表示・非表示にかかる時間を指定できます。Default$('#idname').toggle(2000);1$('#idname').toggle(2000);デモ画面を用意しました。使って表示・非表示を切り替えます。引数に2000ミリ秒を指定しておりゆっくり表示・非表示されます。使って表示・非表示を切り替えます。フェードイン・アウトフェードイン・アウトは、表示・非表示をする点は同じですが、じんわり表示・非表示されます。Default$('#idname').fadeIn();1$('#idname').fadeIn();こちらも引数にミリ秒単位で表示速度を入力出来ます。Default$('#idname').fadeOut();1$('#idname').fadeOut();こちらも引数にミリ秒単位で非表示にする速度を入力出来ます。Default$('#idname').fadeOut(2000);1$('#idname').fadeOut(2000);表示・非表示の判定は「HTML要素の表示・非表示」と同様です。クリックすると、じんわり表示・非表示を切り替えます。引数で表示・非表示の速度をミリ秒単位で指定できます。使って表示・非表示を切り替えます。引数に2000ミリ秒を指定しておりゆっくり表示・非表示されます。使って表示・非表示を切り替えます。スライドアップ・スライドダウンスライドアップ・スライドダウンも同じように表示・非表示を行うものです。違いは、スライドアップは上に潰れるように非表示になります。Default$('#idname').slideUp();1$('#idname').slideUp();引数にミリ秒単位で非表示の速度を入力出来ます。Default$('#idname').slideUp(2000);1$('#idname').slideUp(2000);スライドダウンは潰れたものが下に膨らむように表示されます。Default$('#idname').slideDown();1$('#idname').slideDown();引数にミリ秒単位で表示の速度を入力出来ます。Default$('#idname').slideDown(2000);1$('#idname').slideDown(2000);1つのボタンで表示を切り替えるには以下のように書きます。{$('#idname').slideToggle();});こちらも引数にミリ秒単位で表示・非表示の速度を入力出来ます。使って表示・非表示を切り替えます。引数に2000ミリ秒を指定しておりゆっくり表示・非表示されます。使って表示・非表示を切り替えます。使い引数に数値を入力することで速度を調整出来る。使い引数に数値を入力することで速度を調整出来る。使い引数に数値を入力することで速度を調整出来る。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。Ajaxとは?jQueryで非同期通信を行う方法jQueryでWindowやコンテンツの高さや幅を取得する方法RECOMMENDこちらの記事も人気です。jQuery(js)2018.8.23JavaScriptの読み込み方2選「どこで読み込むのが正しいの?」jQuery(js)2018.9.10jQueryでサイドバーを追従させる方法jQuery(js)2018.9.1jQueryでDOM操作(基礎)jQuery(js)2018.9.3jQueryでHTMLやテキストを変更・削除する方法jQuery(js)2018.9.8jQueryでサイドメニューを縦にスライドして折りたたみする方法jQuery(js)2018.9.6jQueryでリンクのクリックを無効にする方法jQuery(js)2018.9.6jQueryでメニューのサブメニュー(ドロップダウン)をクリックで開閉さ...jQuery(js)2019.9.26jQueryで値が数値かどうかをチェックする方法むねひろ現在36歳。プログラマー歴16年。高校卒業後は調理師見習いをしていたけど、不況で先が不安になり離職。その後上京しハローワークの紹介でプログラマーに。分からないことだらけで辛い日々だったけど、3年頑張ったら色々見えてきてフリーランスに。面白そうなシステム開発をもっとしたい。