[JavaScript] jQyeryでアニメーションを実装する

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

実行結果

上記のHTMLファイルを表示します。下図の表示画面となります。


左の[button]をクリックするとフェード効果付きで枠が表示されます。


枠が表示されました。


右の[button]をクリックすと枠が非表示になります。


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

プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)