ASP.NET jQuery 食谱21 (jQuery各种动画基础效果技巧集合)
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操作动画效果的时候，希望对你有一定的帮助。
