@ PHP

fadeIn() fadeOut()

fadeIn() fadeOut() は、文字通りフェードイン・フェードアウトしながら HTML 要素の表示・非表示を切り替えるメソッドです。透明度(CSS の opacity プロパティー)の値を徐々に変更することで、フェード効果を実現しています。引数には、アニメーションスピードとコールバック関数を指定できます。

event_fade.html

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

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p id="trigger_in">Fade-In</p>
  <p id="trigger_out">Fade-Out</p>
  <div style="display: none"><img src="images/baba.gif"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#trigger_in").click(function () {
    $("div").fadeIn(1000)
  });
  $("#trigger_out").click(function () {
    $("div").fadeOut(1000)
  });
});
</script>
</body>

</html>

demo

フェードイン / フェードアウトを切り替える fadeToggle()

fadeToggle() は対象が消えているときはフェードイン、消えていないときはフェードアウトと状態に合わせて自動的に処理を切り替えます。

event_fadetoggle.html

<!DOCTYPEhtml>
<html>

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p id="trigger">Fade-Toggle</p>
  <div style="display:none"><img src="images/baba_off.gif" alt="baba"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("#trigger").click(function() {
    $("div").fadeToggle(500)
  })
});
</script>
</body>

</html>

demo