感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

show(),hide(),toggle()で要素を表示したり非表示にしたりする。

スポンサーリンク

非表示に設定されている要素を表示する

要素選択.show(速度);

非表示に設定されている要素を表示するにはshow()メソッドを使うが、アニメーションっぽく演出するには、引数に速度を指定する。
速度は"slow","normal","fast"かあるいは数値(1/1000秒=ミリ秒)で指定する。
たとえば、以下の例では、styleであらかじめ要素を非常時にしておく。
で、show()メソッドで1秒かけてゆっくり画像を表示するようにしている。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>要素を出したり隠したりする(表示/非表示)</title>
<link rel="stylesheet" type="text/css" href="./styles/core.css">
<link rel="stylesheet" type="text/css" href="./styles/module.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("p").show(1000);
});
</script>
</head>
<body>
写真です。</br>
<p style="display:none">
<img src="img/bijyo.jpg">
</p>
</body>
</html>

要素をアニメーションで隠す

要素を隠すのはhide()メソッド。

要素選択.hide(速度);

表示と非表示を切り替える

jQueryで表示/非表示の切り替えはtoggle()メソッドで行う。
要素が表示されていたら非表示に、非表示なら表示される。
ボタンで切り替えるサンプルを作ってみる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>要素を出したり隠したりする(表示/非表示)</title>
<link rel="stylesheet" type="text/css" href="./styles/core.css">
<link rel="stylesheet" type="text/css" href="./styles/module.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#toggle").click(function() {
    $("#photo").toggle(2000);
  });
});
</script>
</head>
<body>
<div class="discription">
これは私の写真です。見たければクリックしてください。
</div>
<button id="toggle">写真の表示/非表示</button>
<div id="photo"><img src="img/kawaii.jpg" height="300" width="250"></div>
</p>
</body>
</html>

読んだ本

jQueryプログラミング入門―Ajaxにも使えるJavaScriptライブラリ

jQueryプログラミング入門―Ajaxにも使えるJavaScriptライブラリ