jQyeryでアニメーションを実装するコードを紹介します。
アニメーションをする場合は、セレクタで選択したオブジェクトに対し
<!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]をクリックすと枠が非表示になります。
枠が非表示になりました。
