1. 滑入动画（类似于商店的卷帘门）
$(selector).slideDown(speed, 回调函数);
解释： 此语句实现的功能为， 在XX时间内， 下拉动画， 显现元素。
当 slideDown() 中省略参数， 或者传入不合法的值是， 那么系统会使用默认值：400ms。
回调函数可以省略不写。
示例代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery之滑入动画</title>
<style>
#box{
200px;
height: 200px;
display: none;
background-color: #ff6700;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("#box").slideDown(5000, function () {
alert("jQuery滑入动画结束");
});
})
</script>
</body>
</html>
2. 滑出动画效果
$(selector).slideUp(speed, 回调函数);
解释： 此语句实现的功能为， 在XX时间内， 上拉动画， 显现元素。
当 slideUp() 中省略参数， 或者传入不合法的值是， 那么系统会使用默认值：400ms。
回调函数可以省略不写。
示例代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery之滑出动画</title>
<style>
#box{
200px;
height: 200px;
display: block;
background-color: #ff6700;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("#box").slideUp(5000, function () {
alert("jQuery滑出动画结束");
});
})
</script>
</body>
</html>
3. 便捷滑入滑出动画效果
$(selector).slideToggle(speed, 回调函数);
使用此方法， 可以进行滑入滑出效果的切换， 此方法有两种情形：
（1）当元素的设置为：display = block; 也就是元素已经显示时， 使用 slideToggle()将会变成上拉隐藏。
（2）当元素的设置为：display = none; 也就是元素已经隐藏时， 使用 slideToggle()将会变成下拉显示。
回调函数可以省略不写。
示例代码如下：（元素属性 display = block;）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery之滑入滑出动画</title>
<style>
#box{
200px;
height: 200px;
display: block;
background-color: #ff6700;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
$("#box").slideToggle(5000, function () {
alert("jQuery滑入滑出动画结束");
});
})
</script>
</body>
</html>
4. jQuery滑入滑出动画实例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮控制元素滑入滑出</title>
<style>
.box{
200px;
height: 200px;
display: none;
background-color: green;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(function () {
//点击“滑入”按钮， 实现元素显示
$("button:eq(0)").click(function () {
$(".box").slideDown(3000, function () {
alert("滑入动画执行完毕！");
});
});
//点击“滑出”按钮， 实现元素隐藏
$("button:eq(1)").click(function () {
$(".box").slideUp(3000, function () {
alert("滑出动画执行完毕！");
});
});
//点击“切换”， 实现元素间的显示/隐藏
$("button:eq(2)").click(function () {
$(".box").slideToggle(3000, function () {
alert("滑入/滑出动画执行完毕！");
});
});
})
</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div class="box"></div>
</body>
</html>