}); googletag.defineSlot('/21812778492/blog_300x250_common_sidemiddle01_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565198726712-0').addService(googletag.pubads()); ボタンを押すと文字が表示され、ボタン名が変わります(1回のみ)。, 11行目は、toggleメソッドの2つめの引数が関数になっています。 ITSakura Blog for business and development, jQueryの要素を表示または非表示にするサンプルです。 }); googletag.cmd = googletag.cmd || []; jQueryで作成するアコーディオンメニューやスライドショー、ギャラリーなどは、 部分的に非表示にし、マウスクリックやマウスオーバーで表示させる仕組みのものが大半です。 ページのレンダリング時に一瞬「非表示」が効かず全部が表示されてしまう、 jQuery slideUp/slideDown スライドで表示/非表示 googletag.defineSlot('/21812778492/blog_728x90_common_overlay', [728, 90], 'div-gpt-ad-1584694002281-0').addService(googletag.pubads()); // fixed01のWORKSが不定期なため共通処理とする プログラマーの技術や経験の暴露ブログです。何か聞きたいことがあれば遠慮なくご連絡ください。, jQuery(js) JavaScript 要素を表示/非表示にするサンプル(displayとvisibility) ③チェックボックスにtoggleアクションをつけて、speedを設定することでちょぴっとオシャレ感を出す 解説というまででもないですが、お役に立ったらうれしい限りです。 jQueryオススメ書籍 }); jQuery fadeIn/fadeOut フェードイン/フェードアウト (adsbygoogle = window.adsbygoogle || []).push({}); JavaScript 要素を表示/非表示にするサンプル(displayとvisibility). 上記内容を踏まえて、次のサンプル例を見てください!, この例では、2つのp要素が配置されておりボタンをクリックすることで非表示になるようにしています。, 1つ目のp要素には「hide(‘fast’)」を記述しており、素早く要素が非表示になるように設定しています。, 2つ目のp要素には「hide(2000, ‘linear’)」を記述しており、一定の速度で2秒間かけて非表示になるように設定しています。, ボタンをクリックすると、1つ目のp要素が先に非表示となり続けてゆっくりと2つ目のp要素が非表示になりますね。, このように、数値だけでなく文字列を指定することでも同じようにアニメーション効果を付与できるわけです!, 「hide()」と一緒によく使われる類似メソッドとして「show()」があります。, 「hide()」が要素を非表示にするメソッドなのに対して、「show()」は要素を表示することができます!, しかし、そのあとに「show()」を実行することで非表示だったp要素を表示させています。, つまり、「hide()」と「show()」をペアで活用することで、簡単に要素の「表示・非表示」を実現できるというわけです!, 「toggle()」は、「hide() / show()」を1つにまとめた便利なメソッドとして知られています。, つまり、「toggle()」メソッドだけで特定の要素を「表示・非表示」することができるわけです!, この例では、p要素とボタンが配置されており、ボタンをクリックすることでtoggle()が実行されるようにしています。, しかしながら、たったこれだけの記述で実行されるたびに要素を「表示・非表示」に切り替えることができるのです!, つまり、ボタンをクリックするたびにp要素が表示されたり、非表示になったりを繰り返すというわけです。, もちろん、hide()と同じように数値や文字列によるアニメーション効果も付与できます。, これは2秒間かけてp要素を一定の速度で表示させたり、非表示にさせたりを繰り返す例です。, 以上のことから、単純に「表示・非表示」を繰り返すだけなら「toggle()」メソッドが便利でしょう。, 「toggle()」メソッドについての基本から応用までは、次の記事で詳しくまとめているのでぜひ参考にしてみてください!, 今回は、jQueryで特定の要素を非表示にできる「hide()」について学習しました!, ・hide()の引数に数値を指定することでアニメーション効果を付与できる 侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。, 「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。, フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。 jQueryで特定のHTML要素を表示・非表示することができる方法をサンプルコード付きで説明します。 最初は非表示にしたいコンテンツがある場合、コンテンツ量が多い場合にユーザーが見る見ないを選択させたり、とても便利です。 ボタンを押すと文字を表示し、再度ボタンを押すと文字を非表示にします。, 8行目は、初期表示を非表示にしています。 googletag.defineSlot('/21812778492/blog_300x250_common_ctc01_adsence', [300, 250], 'div-gpt-ad-1566564396953-0').addService(googletag.pubads()); $('.ninja1').toggle(); jQuery fadeToggle フェードイン/フェードアウト googletag.defineSlot('/21812778492/blog_300x250_common_fixed02_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565198391774-0').addService(googletag.pubads()); CSS 優先順位の基本・セレクタの優先順位, こちらも名前の通りフェードアウトしていきます。消える速度も秒数(ミリ)、fast、 slow、 normalで指定できるので手っ取り早くフェードアウトさせたい場合はこちらをおすすめします。ただ色々な消え方などはできないのでそうしたい方はCSSアニメーションでされた方が良いかと思います。, これ自体で要素を消すことはできませんが、display:none;などを指定したクラスを追加してあげることでクラスが追加された瞬間要素が消えます。 $('.btn_ninja3').click(function(){ 2018.09.04 13行目のshowメソッドで1行目のP要素の文字を表示します。 ボタンを押すと1秒かけて表示/非表示にします。, 11行目のtoggleメソッドは、1秒(1000ミリ秒)かけて表示/非表示にします。設定する単位はミリ秒です。, toggleメソッドの引数に関数を設定するサンプルです。 var pbjs=pbjs||{}; $('.btn_ninja2').click(function(){ jQueryで要素を消す際に使用するメソッドは色々ありますが違いはわかっていますか?それぞれに特徴がありますので理解した上で使用する事で制作時間を削るだけでなくメンテナンスする際も楽になります。hide(),fadeOut(),css(),addClass()をサンプルコード付きで紹介しています。 googletag.defineSlot('/21812778492/blog_300x600_common_sidemiddle01_adsense', [300, 600], 'div-gpt-ad-1571293897778-0').addService(googletag.pubads()); jQueryの勉強を引き続き実施。今回は値を変更する『.val()』メソッドを使って実装。ページを表示したときにテキスト欄と選択肢にあらかじめ初期値が入るものに仕上げたので備忘録。今回はスケジュール画面に表示されている件名の初期値と、頻度の googletag.defineSlot('/21812778492/blog_468x60_common_eyecatch02_adsence', [728, 90], 'div-gpt-ad-1567575393317-0').addService(googletag.pubads()); googletag.defineSlot('/21812778492/blog_300x250_common_sidemiddle02_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565198822157-0').addService(googletag.pubads()); googletag.enableServices(); var googletag = googletag || {}; $('.ninja2').show(1000); その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。 2018.11.12munehiro, これは、クラスの追加・削除やスタイルの追加・削除でも対応出来ますが、jQueryには表示・非表示のための機能が既にあるためそれを使ったほうがコードがすっきりして便利です。, 非表示は、スタイルに display: none; を設定することで非表示になります。, のように書くと、#btn を連続でクリックした場合は表示・非表示が繰り返されます。, ちなみにこちらも引数に数値を入れるとミリ病単位で表示・非表示にかかる時間を指定できます。, デモ画面のボタンAで show() と hide() を使って表示・非表示を切り替えます。, デモ画面のボタンBで show(), hide() の引数に2000ミリ秒を指定しておりゆっくり表示・非表示されます。, フェードイン・アウトは、表示・非表示をする点は同じですが、じんわり表示・非表示されます。, フェードイン・アウトにも toggle() があり、fadeToggle() を使います。, デモ画面のボタンCで fadeIn() と fadeOut() を使って表示・非表示を切り替えます。, デモ画面のボタンDで fadeIn(), fadeOut() の引数に2000ミリ秒を指定しておりゆっくり表示・非表示されます。, デモ画面のボタンIで fadeToggle() を使って表示・非表示を切り替えます。, デモ画面のボタンEで slideDown() と slideUp() を使って表示・非表示を切り替えます。, デモ画面のボタンFで slideDown(), slideUp() の引数に2000ミリ秒を指定しておりゆっくり表示・非表示されます。, デモ画面のボタンJで slideToggle() を使って表示・非表示を切り替えます。, HTML要素の表示・非表示には show(), hide() を使い引数に数値を入力することで速度を調整出来る。, フェードイン・アウトには fadeIn(), fadeOut() を使い引数に数値を入力することで速度を調整出来る。, スライドアップ・スライドダウンには slideUp(), slideDown() を使い引数に数値を入力することで速度を調整出来る。, 1行でスライドアップ・スライドダウンを切り替えるには slideToggle() を使う。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。.