要實現元素的華東效果，需要調用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>
結果如下圖所示：
