显示/隐藏

显示 show([speed,callback]);

可选参数1：代表执行动画的时长，毫秒数，也可以是代表时长的字符串：fast(200毫秒)、 normal(400毫秒)、 slow(600毫秒)
如果字符串内容写错了，则按normal执行显示
如果show()这个方法没有参数,那就没有动画效果
可选参数2：代表动画执行完毕后的回调函数

隐藏 hide([speed,callback]);

使用方法同上

切换 toggle([speed,callback]);

如果元素是隐藏状态就动画显示,如果元素是显示状态就动画隐藏
使用方法同上

代码练习：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1 {
                width: 200px;
                height: 200px;
                background-color: red;
                display: none;
            }
        </style>
    </head>

    <body>
        <input type="button" value="显示" id="show" />
        <input type="button" value="隐藏" id="hide" />
        <input type="button" value="切换" id="toggle" />
        <br />
        <div id="div1"></div>
    </body>

</html>
<script src="js/jquery.js"></script>
<script>
    $(function() {
        //显示
        $("#show").click(function() {
            $("#div1").show();
            //$("#div1").show(2000);
            //$("#div1").show("fast");
            //$("#div1").show("normal");
            //$("#div1").show("slow");
            //$("#div1").show("123");
//          $("#div1").show(1000, function() {
//              alert("动画执行完毕");
//          });
        });

        //隐藏
        $("#hide").click(function() {
            //$("#div1").hide();
            //$("#div1").hide(1000);
            //$("#div1").hide("fast");
            //$("#div1").hide("normal");
            //$("#div1").hide("slow");
//          $("#div1").hide(1000, function() {
//              alert("动画执行完毕");
//          });
            
        });
        //切换
        $("#toggle").click(function(){
            //$("#div1").toggle();
            //$("#div1").toggle(1000);
            //$("#div1").toggle("fast");
            //$("#div1").toggle("normal");
            //$("#div1").toggle("slow");
            $("#div1").toggle(1000, function() {
                alert("动画执行完毕");
            });         
        });
    });
</script>

滑动

滑入 slideDown([speed,callback]);

向下滑动元素
使用方法同上。除了slideDown();默认是含"normal"的400毫秒的速度。

滑出 slideUp([speed,callback]);

向上滑动元素
使用方法同上。

切换 slideToggle([speed,callback]);

元素是隐藏状态就滑入，元素是显示状态就滑出
使用方法同上。

代码练习：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1 {
                width: 200px;
                height: 200px;
                background-color: red;
                display: none;
            }
        </style>
    </head>

    <body>
        <input type="button" value="滑入" id="slideDown" />
        <input type="button" value="滑出" id="slideUp" />
        <input type="button" value="切换" id="slideToggle" />
        <br />
        <div id="div1"></div>
    </body>

</html>
<script src="js/jquery.js"></script>
<script>
    $(function() {
        //滑入
        $("#slideDown").click(function() {
            $("#div1").slideDown();
            //$("#div1").slideDown(2000);
            //$("#div1").slideDown("fast");
            //$("#div1").slideDown("normal");
            //$("#div1").slideDown("slow");
            //$("#div1").slideDown("123");
//          $("#div1").slideDown(1000, function() {
//              alert("动画滑动执行完毕");
//          });
        });

        //滑出
        $("#slideUp").click(function() {
            $("#div1").slideUp();
            //$("#div1").slideUp(1000);
            //$("#div1").slideUp("fast");
            //$("#div1").slideUp("normal");
            //$("#div1").slideUp("slow");
//          $("#div1").slideUp(1000, function() {
//              alert("动画滑动执行完毕");
//          });
            
        });
        //切换
        $("#slideToggle").click(function(){
            //$("#div1").slideToggle();
            //$("#div1").slideToggle(1000);
            //$("#div1").slideToggle("fast");
            //$("#div1").slideToggle("normal");
            //$("#div1").slideToggle("slow");
            $("#div1").slideToggle(1000, function() {
                alert("动画滑动执行完毕");
            });         
        });
    });
</script>