公共部分：

<script src="js/jquery-1.8.3.js"></script>

 一、show()/hide()/toggle()

都可接收两个参数，第一个参数表示执行所需的时间单位为毫秒；第二个参数表示执行完毕之后的回调函数

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background: orange;
            display: none;
        }

    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>

        $(function() {
            //显示
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //隐藏
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //切换
            $("button").eq(2).click(function() {
                $("div").toggle(1000, function() {
                    //动画执行完毕之后调用
                });
            });
        });

 

---

二、slideDown()/slideUp()/slideToggle()

都可接收两个参数，第一个参数表示执行所需的时间单位为毫秒；第二个参数表示执行完毕之后的回调函数

        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background: orange;
            display: none;
        }

    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div></div>

        $(function() {
            //显示
            $("button").eq(0).click(function() {
                $("div").slideDown(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //隐藏
            $("button").eq(1).click(function() {
                $("div").slideUp(1000, function() {
                    //动画执行完毕之后调用
                });
            });

            //切换
            $("button").eq(2).click(function() {
                $("div").slideToggle(1000, function() {
                    //动画执行完毕之后调用
                });
            });
        });

 

---

三、