jQuery with ASP.NET III - 动画
4.71/5 (5投票s)
用 ASP.NET 探索 jQuery 动画。
引言
自从 jQuery 问世以来，在当今世界开发交互式且响应更快的 Web 应用程序变得更加容易。它提供了许多强大的功能，您可以非常高效地使用它们，只需很少的代码，否则完成一个简单的效果就需要更多的开发工作和代码行。在本文中，我们将重点关注 jQuery 提供的动画功能，并在我们的 ASP.NET 网站中使用动画效果。
背景
在上一篇文章 jQuery in ASP.NET II - GridView 中，我们使用 GridView 控件探索了一些响应式行为，并将我们的多行文本框验证到指定的字符限制。在这里，我们将重点关注提供的各种动画方法
- 鼠标悬停时放大文本
- 鼠标悬停时创建淡入淡出效果
- 滑动元素
- 动画面板
- 隐藏和显示面板
- 动画链
请注意，我们这里只讨论 jQuery 的代码片段，假设相应的 ASP.NET 控件已放置在网页上。稍后您将清楚。我们只讨论 script 段中所需的 jQuery 代码，例如
<script type="text/javascript">
$(document).ready(function () {
// our jQuery code will goes here...
});
</script>
鼠标悬停时放大文本
我们放置一个带有文本的标签，在鼠标悬停时，通过改变字体大小来放大标签中的文本。
var origFontSize = parseFloat($(".enlarge").css('font-size'));
$("#content").hover(
function () {
$(".enlarge").css("cursor", "pointer");
var newFontSize = origFontSize * 3;
$(".enlarge").animate({ fontSize: newFontSize }, 300);
},
function () {
$(".enlarge").animate({ fontSize: origFontSize }, 300);
}
);
假设：您已放置一个 ID = content 的 fieldset，并放入一个 CssClass = enlarge 的 Label，并在其中输入一些文本内容。我们已定义 enlarge 类为
.enlarge
{
font-size: 12px;
font-family: Arial,sans-serif;
}
parseFloat($(".enlarge").css('font-size'))选择具有enlargeCSS 类的标签，并检索其font-size属性parseFloat到我们的变量origFontSize。$("#content").hover为我们id = content的fieldset设置hover事件。- 在
hover事件中，在 mouseover 函数内部，我们将标签控件的光标设置为pointer。 newFontSize通过将原始字体大小乘以我们的乘数比例（此处为 3）来设置我们的字体大小变量为一个新大小。$(".enlarge").animate({ fontSize: newFontSize }, 300);- 这里是实际执行我们标签控件动画的方法。animate方法接受包含要动画的属性的动画对象。在我们的例子中，我们只传递fontSize属性和我们的新大小值newFontSize。这指示animate方法更改作为参数传递的属性以及新值。对于animate方法的第二个参数，我们传递毫秒为单位的时间间隔值。在我们的例子中，它需要 300 毫秒将其字体大小更改为一个新值。$(".enlarge").animate({ fontSize: origFontSize }, 300);在 mouseout 函数内，我们将fontSize重置为变量origFontSize中包含的原始值。
鼠标悬停时创建淡入淡出效果
放置一个 id = content 的 fieldset，并在 fieldset 容器内放置一个图像控件。
$("#content").hover(
function () {
$("#<%=Image1.ClientID%>").css("cursor", "pointer");
$("#<%=Image1.ClientID%>").fadeOut(1000);
},
function () {
$("#<%=Image1.ClientID%>").fadeIn(1000);
}
);
假设：您已放置一个 id = content 的 fieldset，并在 fieldset 容器内有一个 ID = Image1 的图像控件。将其 src 属性设置为图像路径，此处我们在网站根目录下创建一个 images 文件夹并将我们的 image.jpg 放在该文件夹中。同时为我们的图像控件设置 CssClass 为 imagecontent，我们将其定义为
.imagecontent
{
width: 350px;
height: 250px;
}
$("#content").hover为我们id = content的fieldset设置hover事件。- 在
hover事件中，在 mouseover 函数内部，我们将图像控件的光标设置为pointer。 fadeOut是创建淡出动画效果的实际方法。它接受一个参数来设置创建所需效果所消耗的时间间隔。fadeIn：在 mouseout 函数内，我们使用fadeIn和所需的时间间隔参数重置我们的图像控件。
滑动元素
放置一个按钮控件，为用户提供一种点击并滑动元素的方式。放置一个带有我们 HTML 内容的 div。
$("#<%= btnSubmit.ClientID%>").click(function (e) {
e.preventDefault();
if ($(".slide").is(":hidden")) {
$(".slide").slideDown("slow");
}
else {
$(".slide").slideUp("slow");
}
});
假设：您已在窗体上放置一个 ID 为 btnSubmit 的 Button 控件。并有一个 CSS 类为 slide 的 div，我们将其定义为
.slide
{
font-size: 12px;
font-family: Arial,sans-serif;
display: none;
height: 100px;
background-color: #148A21;
color:#000000;
}
- 为
btnSubmit按钮附加点击事件。 e.preventDefault()通过阻止默认行为来阻止页面回发。$(".slide").is(":hidden")首先检查具有 CSS 类slide的元素是否已hidden，如果是，则slideDown("slow")我们的元素。我们传递了 jQuery 定义的常量时间间隔slow，您也可以更改为任何所需的时间间隔值。- 如果我们的元素尚未
hidden，那么我们将使用常量时间间隔值slow来slideUp我们的元素。
动画面板
放置一个按钮控件，让用户相应地动画面板。放置一个带有我们 HTML 内容的面板。
var regular = true;
$("#<%=btnSubmit.ClientID%>").click(function (e) {
e.preventDefault();
if (regular == true) {
$(".contentArea").animate({
opacity: 0.5,
width: "500px",
height: "280px",
fontSize: "36px",
borderWidth: "15px"
}, "slow");
}
else {
$(".contentArea").animate({
opacity: 1.0,
width: "300px",
height: "100px",
fontSize: "12px",
borderWidth: "5px"
}, "slow");
}
regular = !regular;
});
假设：您已在窗体上放置一个 ID 为 btnSubmit 的按钮控件。放置一个 CSS 类为 contentArea 的面板，我们已将其定义为
.contentArea
{
font-size: 12px;
font-family: Arial,sans-serif;
width: 300px;
height: 100px;
background-color: #9999FF;
border: solid;
}
var regular = true定义了我们的变量来维护面板动画的状态。- 为
btnSumbit按钮附加点击事件。 e.preventDefault()通过阻止默认行为来阻止页面回发。regular == true首先检查我们是否尚未在面板上应用动画。然后调用(".contentArea").animate()方法，该方法具有不同 CSS 属性的不同值，这些属性是我们必须更改或应用于我们面板内容的，而animate方法的第二个参数(slow)是动画效果中消耗的时间间隔。- 否则，如果我们已经应用了动画效果，现在我们将恢复到面板的原始 CSS 属性。我们已经为目标面板设置了各种 CSS 属性的原始值。
隐藏和显示面板
让我们隐藏和显示不同的面板，一个像菜单一样的面板头显示在网页上，当我们点击任何头部面板时，我们探索相应的内容面板。
$(".content_head").click(function () {
$(".content_body").hide(100);
$(this).next(".content_body").slideToggle("slow");
});
假设：您已放置一对面板。为第一个面板（充当菜单标题）设置 CssClass = content_head，为第二个面板（显示该菜单项的内容）设置 CssClass = content_body。我们定义这些 CSS 类为
.content_head
{
width: 150px;
height: 30px;
background-color: #CCCCCC;
cursor: pointer;
}
.content_body
{
display: none;
width: 150px;
height: 50px;
background-color: #9999FF;
}
- 为具有 CSS 类
content_head的面板附加点击事件。 $(".content_body").hide(100)首先隐藏所有内容元素，如果已经探索了其他菜单项并显示了内容，我们首先隐藏该内容。$(this).next(".content_body").slideToggle("slow")现在获取当前点击的元素（通过this）并使用next(".content_body")查找附加到此菜单项的下一个内容项。在这里，我们到达了附加到点击菜单项的内容面板。现在我们通过调用slideToggle()并使用常量时间间隔slow来切换滑动状态。
动画链
现在我们在网页上放置一个面板框并对其进行动画处理。我们不限于只对元素进行一次动画处理，jQuery 提供了链接动画效果的功能，可以对任何您想要的元素进行动画处理。
$("#<%=btnSubmit.ClientID%>").click(function (e) {
e.preventDefault();
$('.contentArea').animate({ left: "+=200"}, 2000)
.animate({ top: "+=100"}, 700)
.animate({ left: "-=400"}, 1200)
.animate({ top: "-=100"}, 700)
.animate({ left: "+=200"}, 2000);
});
假设：您已放置一个 ID 为 btnSubmit 的按钮控件，并允许用户通过此按钮控制动画效果。放置一个 CSS 类为 contentArea 的面板，我们已定义 CSS 类为
.contentArea
{
width: 50px;
height: 50px;
background-color: #71B3A2;
border: solid;
position: relative;
}
- 为
btnSumbit按钮附加点击事件。 e.preventDefault()通过阻止默认行为来阻止页面回发。$('.contentArea')选择我们的面板并以链式模型重复调用animate()方法。请记住，animate()方法返回一个已经调用它的对象元素，因此通过连续使用 . 符号重复调用此方法，我们实际上是在对同一个对象以重复的模式调用此方法，因为该方法返回相同的对象，并带有更新的对象状态。animate({ left: "+=200"}, 2000)通过更改面板在网页上的位置来动画处理面板，设置其 CSSleft属性为某个新值，并提供200毫秒的时间间隔在此时间间隔内完成动画。animate({ top: "+=100"}, 700)通过向其 CSS 属性top添加某个新值来更改面板的顶部位置。animate({ left: "-=400"}, 1200)再次更改leftCSS 属性，但这次传递一个负值，因此此值将从面板在网页上的当前左侧位置减去。animate({ top: "-=100"}, 700)更改topCSS 属性，但这次传递一个负值，因此此值将从面板的当前顶部位置减去。.animate({ left: "+=200"}, 2000);再次更改leftCSS 属性，并更改面板的左侧位置。
参考文献
Sonal Aneel Allana 的 ASP.NET jQuery Cookbook
兴趣点
我们已经探索了一些用于实现动画效果的 jQuery 函数。jQuery 提供了许多有用的实用程序来设计动画，从而使开发人员能够构建丰富的动画页面，为 Web 用户提供更好的交互体验。您必须探索这些方法，您会发现使用 jQuery 开发交互式网页现在变得非常容易，只需付出很少的努力。