要实现元素的华东效果，需要调用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>
结果如下图所示：
