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