@ PHP

show() hide()

非表示状態の要素を表示する show()

show() は CSS の display プロパティーの値が「none」の HTML 要素をアニメーションしながら表示する命令です。

要素の透明度を透明から不透明に、サイズ(高さ・幅)を 0 から本来のサイズに徐々に変化させ、最終的に display プロパティーの値を「block」に切り替えます。

アニメーションのスピードは「slow」「normal」「fast」のいずれか、またはミリ秒(1秒=1000ミリ秒)で show(1000) のように指定します。ミリ秒で指定する場合は “(ダブルクォーテーション)で囲う必要はありません。

show.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
div {
  display:none;
  width:200px;
  height:200px;
  background:red;
}
</style>
</head>

<body>
  <p id="trigger">Show it</p>
  <div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#trigger").click(function() {
    $("div").show(1000)
  })
});
</script>
</body>

</html>

demo

show() にコールバック関数を設定する

show() は、スピードの後ろに,(カンマ)区切りでコールバック関数を設定できます。

コールバック関数とは、関数を引数にする関数のことです。2番目の引数に指定した関数を関数側が特定のタイミングでコールして情報を返してくれるので、コールバック関数といわれます。

show_callback.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
div {
  width:200px;
  height:200px;
  background:red;
  display:none;
}
</style>
</head>

<body>
  <p id="trigger">Show it</p>
  <div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#trigger").click(function () {
    $("div").show(1000,function() {
      $(this).css("background","blue")
    })
  })
});
</script>
</body>

</html>

demo

表示中の要素を非表示にする hide()

hide() は show() の逆の働きをする命令です。表示状態(display:block)の HTML 要素を非表示状態(display:none)に変更します。

hide.html

<!DOCTYPE html>
<html lang="ja">
 
<head>
<meta charset="utf-8">
<title>sample</title>
<style>
div {
  width:200px;
  height:200px;
  background:red;
  display:none;
}
</style>
</head>

<body>
  <p id="trigger_show">Show it</p>
  <p id="trigger_hide">Hide it</p>
  <div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#trigger_show").click(function () {
    $("div").show(1000)
  });
  $("#trigger_hide").click(function () {
    $("div").hide(1000)
  });
});
</script>
</body>

</html>

demo

表示 / 非表示を切り替える toggle()

各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものは表示状態にします。

show_hide_toggle.html

<!DOCTYPE html>
<html lang="ja">
 
<head>
<meta charset="utf-8">
<style>
div {
  width: 200px;
  height: 200px;
  background: red;
  display: none;
}
</style>
</head>

<body>
  <p id="trigger">Toggle it!</p>
  <div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#trigger").click(function() {
    $("div").toggle(2000)
  })
});
</script>
</body>

</html>

demo