jQyeryでアニメーションを実装する - jQuery

jQyeryでアニメーションを実装するコードを紹介します。

概要

アニメーションをする場合は、セレクタで選択したオブジェクトに対し

show
hide
fadeIn
fadeOut
slideDown
slideUp

などのメソッドを実行します。
メソッドの引数には、アニメーションの速度を示す”slow”、”normal”、”fast”の文字列、またはアニメーションが完了するまでの時間をミリ秒で指定します。

標準のアニメーション

コード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function () {
        $("#frame01").show("slow");
      })
      $("#Button2").click(function () {
        $("#frame01").hide("slow");
      })
    })
  </script>

</head>
<body>
  <input id="Button1" type="button" value="button" />
  <input id="Button2" type="button" value="button" />
  <div id="frame01" style="display: none; margin-top: 32px; margin-left: 32px; width: 150px; height: 150px; background-color: #b6ff00;">枠です</div>
</body>
</html>

解説

  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function () {
        $("#frame01").show("slow");
      })
      $("#Button2").click(function () {
        $("#frame01").hide("slow");
      })
    })
  </script>

$(document).ready(function () {...}

により、ページ表示後にjavascriptを実行します。

  $("#Button1").click(function () {
    $("#frame01").show("slow");
  })

上記は左側のボタンがクリックされた時の処理です。イベントについてはこちらの記事を参照してください。クリックされるとIDが"frame01"の枠をshow()メソッドで表示します。show()メソッドでの表示により、アニメーション効果を付けて枠を表示します。

  $("#Button2").click(function () {
    $("#frame01").hide("slow");
  })

同様に右側のボタンがクリックされた場合は、枠をhideメソッドを呼び出して非表示にします。

実行結果

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

左の[Button]をクリックするとアニメーションで枠が表示されます。(フェード効果＋上下左右方向のスライドアニメーション)

枠が表示されました。

右側のボタンをクリックするとアニメーション効果付きで枠が非表示になります。

スライドアニメーション

コード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function () {
        $("#frame01").slideDown("slow");
      })
      $("#Button2").click(function () {
        $("#frame01").slideUp("slow");
      })
    })
  </script>

</head>
<body>
  <input id="Button1" type="button" value="button" />
  <input id="Button2" type="button" value="button" />
  <div id="frame01" style="display: none; margin-top: 32px; margin-left: 32px; width: 150px; height: 150px; background-color: #b6ff00;">枠です</div>
</body>
</html>

実行結果

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

左の[button]をクリックすると枠がアニメーションで表示されます。上下方向のスライドで表示されます。

枠が表示されました。

右の[button]をクリックすると枠がアニメーションし非表示になります。

枠が非表示になりました。

フェードアニメーション

コード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function () {
        $("#frame01").fadeIn("slow");
      })
      $("#Button2").click(function () {
        $("#frame01").fadeOut("slow");
      })
    })
  </script>

</head>
<body>
  <input id="Button1" type="button" value="button" />
  <input id="Button2" type="button" value="button" />
  <div id="frame01" style="display:none; margin-top:32px; margin-left:32px; width:150px;height:150px;background-color:#b6ff00;">枠です</div>
</body>
</html>