1. 滑入動畫（類似於商店的卷簾門）
$(selector).slideDown(speed, 回調函數);
解釋： 此語句實現的功能為， 在XX時間內， 下拉動畫， 顯現元素。
當 slideDown() 中省略參數， 或者傳入不合法的值是， 那么系統會使用默認值：400ms。
回調函數可以省略不寫。
示例代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery之滑入動畫</title>
<style>
#box{
width: 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{
width: 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{
width: 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{
width: 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>