ASP.NET jQueryレシピ21(jQuery各種アニメーション基礎効果テクニック集合)
63020 ワード
jQueryは、ページアニメーションの効果を実現するツール関数を多く提供し、これらの関数を使用することで、ユーザー体験をよりよく向上させることができます.
まず、jQueryが提供する基本的なアニメーション関数を見てみましょう.
♦ animate(properties,[duration],[easing],[callback]):CSSプロパティ設定のカスタムアニメーションを実行
properties:CSSプロパティのセットで、アニメーションはこのプロパティのセットに向かって移動します.
duration:アニメーションがどのくらい実行されるかを決定する文字列または数値.
easing:使用する消去効果の名前(プラグインのサポートが必要).デフォルトのjQueryは「linear」と「swing」を提供します.
callback:アニメーションの完了時に実行される関数.
♦ fadeIn([duration],[callback]):一致する要素をフェードアウトで表示します.
♦ fadeOut([duration],[callback]):一致する要素をフェードアウトで表示します.
♦ slideUp([duration],[callback]):スライドアニメーションで一致する要素を非表示にします.
♦ slideDown([duration],[callback]):スライドアニメーションで一致する要素を表示します.
♦ slideToggle([duration],[callback]):一致する要素をスライドアニメーションで表示または非表示にします.
♦ jQuery.fx.off:このプロパティが
jQueryは低リソースデバイスで使用されています.
アニメーションを使用すると、ユーザーにアクセス性の問題が発生します.
アニメーションは、このアトリビュートを
♦ stop([clearQueue],[jumpToEnd]):エレメントの現在実行中のアニメーションのマッチングを停止します.
clearQueueは、キューアニメーションをキャンセルするかどうかを示すブール値です.デフォルトは
jumpToEndブール値は、現在のアニメーションがすぐに完了するかどうかを示します.デフォルト
以下、これらの関数を介してASP.NETでは、基本的なアニメーション効果を実現します.
•テキスト拡大のアニメーション効果を実現
ページコード:
スクリプトコード:
•画像のフェードアウト効果を実現
ページコード:
スクリプトコード:
•ページ要素を上下にスライドさせるアニメーション効果を実現
ページコード:
スクリプトコード:
•現在のアニメーションキューのアニメーション効果を抑制する方法
ページコード:
スクリプトコード:
•要素の複数のスタイルが変更されたアニメーション効果を実現
ページコード:
スクリプトコード:
•ページ要素の連続動作をアニメート
ページコード:
スクリプトコード:
•二次メニュー表示のアニメーション効果を実現
ページコード:
スクリプトコード:
以上の例の学習を通して、後でjQueryでアニメーション効果を操作する時、あなたに一定の助けがあることを望みます.
まず、jQueryが提供する基本的なアニメーション関数を見てみましょう.
♦ animate(properties,[duration],[easing],[callback]):CSSプロパティ設定のカスタムアニメーションを実行
properties:CSSプロパティのセットで、アニメーションはこのプロパティのセットに向かって移動します.
duration:アニメーションがどのくらい実行されるかを決定する文字列または数値.
easing:使用する消去効果の名前(プラグインのサポートが必要).デフォルトのjQueryは「linear」と「swing」を提供します.
callback:アニメーションの完了時に実行される関数.
♦ fadeIn([duration],[callback]):一致する要素をフェードアウトで表示します.
♦ fadeOut([duration],[callback]):一致する要素をフェードアウトで表示します.
♦ slideUp([duration],[callback]):スライドアニメーションで一致する要素を非表示にします.
♦ slideDown([duration],[callback]):スライドアニメーションで一致する要素を表示します.
♦ slideToggle([duration],[callback]):一致する要素をスライドアニメーションで表示または非表示にします.
♦ jQuery.fx.off:このプロパティが
trueに設定されている場合、呼び出されると、すべてのアニメーションメソッドは、効果を表示するのではなく、要素を最終状態に設定します.これは、いくつかの理由で満足できる可能性があります.jQueryは低リソースデバイスで使用されています.
アニメーションを使用すると、ユーザーにアクセス性の問題が発生します.
アニメーションは、このアトリビュートを
falseに設定することで再開できます.♦ stop([clearQueue],[jumpToEnd]):エレメントの現在実行中のアニメーションのマッチングを停止します.
clearQueueは、キューアニメーションをキャンセルするかどうかを示すブール値です.デフォルトは
falseです.jumpToEndブール値は、現在のアニメーションがすぐに完了するかどうかを示します.デフォルト
false.以下、これらの関数を介してASP.NETでは、基本的なアニメーション効果を実現します.
•テキスト拡大のアニメーション効果を実現
ページコード:
<form id="form1" runat="server">
<div align="center">
：
<fieldset id="content" style="width: 500px; height: 300px;">
<asp:Label ID="lblContent" CssClass="enlarge" runat="server"> ， ， 。 。</asp:Label>
</fieldset>
</div>
</form>スクリプトコード:
<script type="text/javascript">
$(function () {
var oldSize = parseInt($(".enlarge").css("fontSize"));
var newSize = oldSize * 3;
$("#content").hover(function () {
$(".enlarge").css("cursor", "pointer");
$(".enlarge").animate({ fontSize: newSize }, 300);
}, function () {
$(".enlarge").animate({ fontSize: oldSize }, 300);
});
});
</script>
<style type="text/css">
.enlarge
{
font-size: 12.5px;
font-family: Arial, Sans-Serif;
}
</style>•画像のフェードアウト効果を実現
ページコード:
<form id="form1" runat="server">
<div align="center">
<fieldset id="content" style="width: 480px; height: 370px;">
<asp:Image ID="img1" ImageUrl="~/images/1.jpg" runat="server" />
</fieldset>
</div>
</form>スクリプトコード:
<script type="text/javascript">
$(function () {
$("#content").hover(function () {
$("#img1").css("cursor", "pointer");
$("#img1").fadeOut(1000);
}, function () {
$("#img1").fadeIn(1000);
});
});
</script>
<style type="text/css">
#img1
{
width: 438px;
height: 336px;
}
</style>•ページ要素を上下にスライドさせるアニメーション効果を実現
ページコード:
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 150px;">
<asp:Button ID="btnSlide" runat="server" Text=" " />
<br />
<br />
<asp:Panel ID="plSlide" runat="server" CssClass="slide">
^_^</asp:Panel>
</fieldset>
</div>
</form>スクリプトコード:
<script type="text/javascript">
$(function () {
$("#btnSlide").click(function (e) {
e.preventDefault();
/*if ($("#plSlide").is(":hidden")) {
$("#plSlide").slideDown(600);
}
else {
$("#plSlide").slideUp(600);
}*/
//
$("#plSlide").slideToggle(600);
});
});
</script>
<style type="text/css">
.slide
{
font-size: 12px;
font-family: Arial, Sans-Serif;
display: none;
background-color: #9999FF;
height: 100px;
}
</style>•現在のアニメーションキューのアニメーション効果を抑制する方法
ページコード:
<form id="form1" runat="server">
<div align="center">
<table border="0" cellpadding="3" cellspacing="3">
<tr>
<td class="menuitem">
1
</td>
<td class="menuitem">
2
</td>
<td class="menuitem">
3
</td>
<td class="menuitem">
4
</td>
</tr>
</table>
</div>
</form>スクリプトコード:
<script type="text/javascript">
$(function () {
$(".menuitem").hover(function () {
$(this).animate({ opacity: 0.5 }, "slow");
}, function () {
// stop()
//$(this).animate({ opacity: 1.0 }, "slow");
// stop() ，
$(this).stop().animate({ opacity: 1.0 }, "slow");
});
});
</script>
<script type="text/javascript">
</script>
<style type="text/css">
.menuitem
{
background-color: Gray;
font-weight: bold;
color: White;
text-align: center;
width: 100px;
height: 50px;
cursor: pointer;
}
</style>•要素の複数のスタイルが変更されたアニメーション効果を実現
ページコード:
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 550px; height: 370px;">
<asp:Button ID="btnAnimate" runat="server" Text=" " /><br />
<br />
<asp:Panel ID="plAnimate" runat="server" CssClass="contentArea">
Story， Story 。</asp:Panel>
</fieldset>
</div>
</form>スクリプトコード:
<script type="text/javascript">
$(function () {
$("#btnAnimate").click(function (e) {
e.preventDefault();
$("#plAnimate").animate({ width: "500px",
height: "280px",
opacity: 0.5,
fontSize: "36px",
borderWidth: "16px"
}, "slow");
});
});
</script>
<script type="text/javascript">
</script>
<style type="text/css">
.contentArea
{
font-size: 12px;
font-family: Arial, Sans-Serif;
width: 200px;
height: 100px;
background-color: #9999FF;
border: solid;
}
</style>•ページ要素の連続動作をアニメート
ページコード:
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 550px; height: 250px">
<asp:Button ID="btnAnimate" runat="server" Text=" " />
<br />
<br />
<asp:Panel ID="plAnimate" runat="server" CssClass="contentArea">
</asp:Panel>
</fieldset>
</div>
</form>スクリプトコード:
<script type="text/javascript">
$(function () {
/* ：
1. 200px， 0.8， 2000ms
2. 100px, 0.5， 1700ms
3. 400px, 0.2， 1200ms
4. 200px, 1， 700ms*/
$(function () {
$("#btnAnimate").click(function (e) {
e.preventDefault();
// += -=
$("#plAnimate").animate({ left: "+=200px", opacity: 0.8 }, 2000)
.animate({ top: "-=100px", opacity: 0.5 }, 1700)
.animate({ left: "-=400px", opacity: 0.2 }, 1200)
.animate({ top: "+=200px", opacity: 1 }, 700);
});
});
});
</script>
<style type="text/css">
.contentArea
{
width: 60px;
height: 60px;
border: solid;
background-color: #CCCCCC;
position: relative;
}
</style>•二次メニュー表示のアニメーション効果を実現
ページコード:
<form id="form1" runat="server">
<div>
<div class="menu_head" id="menu1">
1</div>
<div class="menu_sub">
11<br />
12</div>
<div class="menu_head">
2</div>
<div class="menu_sub">
21<br />
22</div>
<div class="menu_head">
3</div>
<div class="menu_sub">
31<br />
32</div>
<div class="menu_head">
4</div>
<div class="menu_sub">
41<br />
42</div>
</div>
</form>スクリプトコード:
<script type="text/javascript">
$(function () {
$(".menu_head").click(function () {
if (parseFloat($(this).css("opacity")) == 1) {
$(this).animate({ opacity: 0.5, fontSize: "18px" }, "slow");
}
else {
$(this).animate({ opacity: 1, fontSize: "15px" }, "slow");
}
$(this).next(".menu_sub").slideToggle("slow");
});
});
</script>
<style type="text/css">
.menu_head
{
width: 150px;
height: 30px;
background-color: #cccccc;
cursor: pointer;
font-size: 15px;
}
.menu_sub
{
width: 150px;
height: 50px;
background-color: #9999ff;
display: none;
}
</style>以上の例の学習を通して、後でjQueryでアニメーション効果を操作する時、あなたに一定の助けがあることを望みます.