jQueryで透明度の変化するアニメーションを実装する - フェードイン、フェードアウトの実装 - jQuery

jQueryを利用して、透明度が変化するアニメーションを実装します。
フェードイン、フェードアウトの効果が得られます。

概要

jQueryを利用してアニメーションをする場合は、animate メソッドを利用します。

書式

セレクタ.animate({ opacity: [変化後の値] }, { duration: [変化する秒数], easing: '[イージングの種類]' })

例

$("#id").animate({ opacity: 0 }, { duration: 400, easing: 'swing'})

コード例

下記のコードを記述します。

fade.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="fade.css" />
  <script src="jquery-3.1.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#fadeout").on("click", function () {
        $("#FadeOutFrame").animate({ opacity: 0 }, { duration: 1000, easing: 'linear' })
      });
      $("#fadein").on("click", function () {
        $("#FadeInFrame").animate({ opacity: 1 }, { duration: 1000, easing: 'linear' })
      });
    });
  </script>
</head>
<body>
  <div id="FadeOutFrame">枠です。</div>
  <a id="fadeout" href="javascript:void(0);">フェードアウト</a>
  <hr/>
  <div id="FadeInFrame">枠です。</div>
  y-neg<a id="fadein" href="javascript:void(0);">フェードイン</a>
</body>
</html>

fade.css

#FadeOutFrame{
    width:360px;
    height:120px;
    background-color:#ffef99;
    border:1px solid #ff6a00;
}

#FadeInFrame{
    width:360px;
    height:120px;
    background-color:#d8ff78;
    border:1px solid #288500;
    opacity:0;
}