
スキルアップ
2021.01.22
家でできる仕事おすすめ13選!趣味やスキルを活かして時間を有効活用
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
jQuery
2018.10.30
jQuery の hide メソッドを使用すると HTML 要素を非表示にさせることができます。
今回は、jQuery の hide メソッドの使用方法について紹介します。
1.hide メソッド
2.hide で要素を非表示
3.hide でフェードアウト
hide メソッドは、指定した HTML 要素を非表示にすることができるメソッドです。
hide メソッドは、引数によって 4 通りの記述方法があります。
$(セレクタ).hide( );
$(セレクタ).hide( duration [, callback] );
$(セレクタ).hide( [options] );
$(セレクタ).hide( [duration] [, easing] [, callback] );
hide メソッドの引数の内容は、それぞれ以下の通りです。
.hide( duration [, callback] )
duration 非表示までの所要時間をミリ秒 又は 文字列( “fast” 又は “slow” )で指定
“fast”:200 ミリ秒、”slow”:600 ミリ秒
初期値:400callback 非表示完了後に実行する関数を指定
.hide( [options] )
options duration
非表示までの所要時間をミリ秒 又は 文字列( “fast” 又は “slow” )で指定
“fast”:200 ミリ秒、”slow”:600 ミリ秒
初期値:400easing
非表示までの動作の種類を指定
初期値:swingqueue
エフェクトのキューに、非表示までの動作を追加するか否かを指定
false の場合、非表示までの動作が直ぐに開始される
初期値:truespecialEasing
easing( 非表示までの動作の種類 )が指定された CSS プロパティを含むオブジェクトを指定step
非表示までの動作のプロパティのために呼び出される関数を指定progress
非表示までの動作の各ステップの後に実行する関数を指定complete
非表示完了時に一度だけ実行する関数を指定start
非表示までの動作開始時に実行する関数を指定done
非表示までの動作完了時に実行する関数を指定fail
非表示までの動作が失敗した時に実行する関数を指定always
非表示までの動作が完了しても完了せずに停止しても実行する関数を指定
.hide( [duration] [, easing] [, callback] )
duration 非表示までの所要時間をミリ秒 又は 文字列( “fast” 又は “slow” )で指定
“fast”:200 ミリ秒、”slow”:600 ミリ秒
初期値:400easing
非表示までの動作の種類を指定
初期値:swingcallback 非表示完了後に実行する関数を指定
hide メソッドを使用して、画像を非表示にします。
非表示ボタンをクリックしてみて下さい。
( 表示ボタンをクリックすると、非表示になった画像が再表示されます。)
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn1").on("click", function() { $("#img1").hide(); }); $("#btn2").on("click", function() { $("#img1").show(); }); }); //--> </script> <div style="background-color:#CCC; height:300px; padding:20px 20px 10px;"> <input type="button" id="btn1" value="非表示"> <input type="button" id="btn2" value="表示"> <img id="img1" src="img.jpg" style="width:200px; height:200px;"> </div>
「 $(“#img1”).hide(); 」のように、非表示にする要素を指定して hide メソッドを呼び出すと 指定した要素が非表示になります。
そして、非表示の要素を表示させる際には show メソッドを使用して「 $(“#img1”).show(); 」のように記述します。
上のサンプルでは、img 要素を指定して画像を非表示にしていますが、上記のソースコードをそのまま試す場合は 画像の URL( img 要素内の src 属性の値 )にご注意下さい。
詳しくは、img要素をご参照下さい。
今度は、hide メソッドを使用して 要素を徐々に非表示にします。
非表示ボタンをクリックしてみて下さい。
( 表示ボタンをクリックすると、非表示になった要素が再表示されます。)
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn3").on("click", function() { $("#spn1").hide(1200); }); $("#btn4").on("click", function() { $("#spn1").show(); }); }); //--> </script> <div style="background-color:#CCC; height:200px; padding:20px 20px 10px;"> <input type="button" id="btn3" value="非表示"> <input type="button" id="btn4" value="表示"> <span id="spn1" style="color:blue;">夢の中で小人が出てきて、踊りませんかと言った。「僕」は疲れていたので申し出を断ると、小人はレコードに合わせて一人で踊った。それから「僕」に身の上話を語った。</span> </div>
「 $(“#spn1”).hide(1200); 」のように、hide メソッドの引数に数値(ミリ秒)を設定すると 指定した要素が時間をかけて徐々に非表示になります。
尚、hide メソッドとは別に フェードアウトさせるための fadeout メソッドもあります。
fadeout メソッドの使用方法についてはjQuery【 fadeout 】要素 をフェードアウトして非表示にをご参照下さい。
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
スキルアップ
2021.01.20
本記事では、料金重視でプログラミングスクールを探している方向けに、未経験からエンジニアを目指せるおすすめのコースを紹介します。無料プログラミングスクールの仕組みや、かかる費用に差が出る理由、料金以外に重視すべきポイントも […]
スキルアップ
2021.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
INTERNOUS,inc. All rights reserved.