slideDown()和slideUp()方法

　　要实现元素的华东效果，需要调用JQuery中的两个方法，一个是slideDown()，另一个是slideUp()。其调用的语法格式如下：

　　slideDown()方法格式：slideDown(speed,[callback])

　　其功能是以动画的效果将所选择的高度向下增大，使其呈现一种“滑动”的效果，而元素的其他属性并不发生变化；参数speed为动画显示的速度，可选项[callback]为动画显示完成后没执行的回调函数。

　　slideUp()方法格式：slideUp(speed,[callback])

　　其功能是以动画的效果将所选择的高度向上减小，同样也是仅改变高度属性，其包含的参数作用与slideDown()方法一样。

（1）功能描述
　　在页面中，单机“标题”栏时，通过slideUp()方法，以动画的效果将“内容”栏中的色块向上滑动，直到完全看不见，并改变“标题”栏的内容：再次单机“标题”栏时，通过slideDown()方法，将“内容”栏中的色块向下滑动，直到全部显示。“标题”栏中的内容也同事发生相应改变。
（2）实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>slideDown()与slideUp()方法</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:86px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee}
           .divFrame .divContent{padding:8px;}
           .divFrame .divContent img{border:solid 1px #ccc;padding:2px}
    </style>
    <script type="text/javascript">
        $(function() {
            var blnShow = false; //初始化一个布尔变量值
            var $Title = $(".divTitle"); //定义变量获取标题部分
            var $Tip = $("#divTip"); //定义变量获取提示元素

            $Title.click(function() { //点击标题部分事件
                if (!blnShow) {
                    //图片高度向上减小，执行完成后，回调一个函数
                    $("img").slideUp(3000, function() {
                        $Tip.html("关闭成功！");
                    })
                    $(this).html("显示图片"); //改变标题内容
                    blnShow = true; //改变布尔变量值
                }
                else {
                    $Tip.html(""); //清空提示内容
                    $("img").slideDown(3000); //图片高度向下增大
                    $(this).html("隐藏图片");
                    blnShow = false;
                }
            })
        })
    </script>
</head>
<body>
      <div class="divFrame">
           <div class="divTitle">隐藏图片</div>
           <div class="divContent">
                <img src="Images/img02.jpg" alt=""/>
                <div id="divTip"></div>
           </div>
      </div>
</body>
</html>

结果如下图所示：

高否？富否？帅否？否？滚去学习！