知识点：
show()/hide()：显示、隐藏元素；不带参数立即切换，传入毫秒值开启动画。内置速度关键词：fast(200)、normal(400)、slow(600)toggle()：显示/隐藏自动切换- 淡入淡出：
fadeIn()淡入、fadeOut()淡出 - 滑动动画：
slideUp()向上收起、slideDown()向下展开、slideToggle()滑动切换
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm34.aspx.cs" Inherits="WebApplication1.WebForm34" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<script>
$(function () {
//隐藏元素
$(":button[value='hide']").click(function () {
$("#panel").hide();
});
//显示元素
$(":button[value='show']").click(function () {
$("#panel").show();
});
//隐藏元素 时间2000
$(":button[value='hide2000']").click(function () {
$("#panel").hide(2000);
});
//显示元素 时间2000
$(":button[value='show2000']").click(function () {
$("#panel").show(3000);
});
//渐渐显示
$(":button[value='fadeIn']").click(function () {
$("#panel").fadeIn(3000);
});
//渐渐消失
$(":button[value='fadeOut']").click(function () {
$("#panel").fadeOut(3000);
});
//出现和隐藏交替
$(":button[value='toggle']").click(function () {
$("#panel").toggle(3000);
});
//慢慢往上 消失
$(":button[value='slideUp']").click(function () {
$("#panel").slideUp(3000);
});
//慢慢往下 展开
$(":button[value='slideDown']").click(function () {
$("#panel").slideDown(3000);
});
//滑动切换
$(":button[value='slideToggle']").click(function () {
$("#panel").slideToggle(3000);
});
});
</script>
<style>
#panel {
width:200px;
height:150px;
background-color:greenyellow;
}
</style>
</head>
<body>
<div id="panel"></div>
<button type="button" value="hide">hide</button><br />
<button type="button" value="show">show</button><br />
<button type="button" value="hide2000">hide2000</button><br />
<button type="button" value="show2000">show2000</button><br />
<button type="button" value="fadeIn">fadeIn</button><br />
<button type="button" value="fadeOut">fadeOut</button><br />
<button type="button" value="toggle">toggle</button><br />
<button type="button" value="slideUp">slideUp</button><br />
<button type="button" value="slideDown">slideDown</button><br />
<button type="button" value="slideToggle">slideToggle</button><br />
</body>
</html>
Code language: HTML, XML (xml)说明：
- 点击不同按钮，可分别测试立即隐藏/显示、带动画的显隐、淡入淡出、上下滑动效果
- 数字参数代表动画持续毫秒
Previous: 练习-Tooltips效果
Next: 菜单展开效果