滑动，指元素通过上下滑动的方式来显示或隐藏。
本文目录：
- slideDown()；
- slideUp()；
- slideToggle()。
slideDown(speed, callback)
给所选元素添加向下滑动的效果。
| 参数 | 类型 | 描述 |
|---|---|---|
| speed | String/Number | 可选。动画时长，预设值为 "slow"（600）、"normal"（默认值，400）、"fast"（200），也可自定义动画时长，单位为毫秒（如：1000）。 |
| callback | Function() | 可选。动作完成后执行的函数。 |
slideUp(speed, callback)
给所选元素添加向上滑动的效果。
| 参数 | 类型 | 描述 |
|---|---|---|
| speed | String/Number | 可选。动画时长，预设值为 "slow"（600）、"normal"（默认值，400）、"fast"（200），也可自定义动画时长，单位为毫秒（如：1000）。 |
| callback | Function() | 可选。动作完成后执行的函数。 |
slideToggle(speed, callback)
slideToggle() 方法是 slideDown() 方法和 slideUp() 方法的结合，即能给元素添加向下滑动的效果，又能给元素添加向上滑动的效果。
| 参数 | 类型 | 描述 |
|---|---|---|
| speed | String/Number | 可选。动画时长，预设值为 "slow"（600）、"normal"（默认值，400）、"fast"（200），也可自定义动画时长，单位为毫秒（如：1000）。 |
| callback | Function() | 可选。动作完成后执行的函数。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_滑动</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
.div_click {
width: 200px;
height: 25px;
text-align: center;
background-color: #E5EECC;
border: 1px solid;
margin-top: 10px;
margin-right: 20px;
padding-top: 5px;
}
.div_left {
float: left;
}
.div_slide {
width: 200px;
height: 50px;
background-color: #E5EECC;
border: 1px solid;
text-align: center;
padding-top: 30px;
}
#div11{
display: none;
}
</style>
</head>
<body>
<div class="div_left">
<div id="div1" class="div_click">点击向下滑动面板</div>
<div id="div11" class="div_slide">slideDown</div>
</div>
<div class="div_left">
<div id="div2" class="div_click">点击向上滑动面板</div>
<div id="div22" class="div_slide">slideUp</div>
</div>
<div class="div_left">
<div id="div3" class="div_click">点击向下/向上滑动面板</div>
<div id="div33" class="div_slide">slideToggle</div>
</div>
<script>
$(function () {
// 向下滑动
$("#div1").click(function () {
$("#div11").slideDown("fast");
});
// 向上滑动
$("#div2").click(function () {
$("#div22").slideUp("slow");
});
// 向下/向上滑动
$("#div3").click(function () {
$("#div33").slideToggle(1000);
});
});
</script>
</body>
</html>
效果演示：
滑动.gif
