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

このページのタグ:[JavaScript] [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;
}

表示結果

上記のHTMLファイルを表示します。下図の画面が表示されます。


[フェードアウト]リンクをクリックします。上部の枠の透明度が上がり、薄くなっていきます。


完全に透明になり、見えなくなります。


[フェードイン]リンクをクリックします。透明度が徐々に下がり、枠が表示されます。


枠が表示されます。


jQueryを利用して、フェードイン、フェードアウトの効果を実装できました。
登録日 :2016-10-12    最終更新日 :2016-10-13
このページのタグ:[JavaScript] [jQuery]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)