在浏覽器網頁中，我們經常會見到具有滑動效果的下拉菜單：
在jQuery中，如果我們想要實現元素的滑動效果，也有2組方法：
在jQuery中，我們可以使用slideUp()實現元素的滑上效果，使用slideDown()方法來實現元素的滑下效果。
語法：
$().slideDown(speed , callback) $().slideUp(speed , callback)
說明：
speed為可選參數，表示動畫執行的速度，單位為毫秒，默認值為200毫秒。如果參數省略，則采用默認速度。
callback為可選參數，表示動畫執行完成之後的回調函數。
對於滑動效果，一般情況下都是先“滑下”再“滑上”。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
#wrapper
{
text-align:left;
display:inline-block;
width:300px;
border:1px solid silver;
}
h3
{
text-align:center;
padding:10px;
background-color:#F1F1F1;
border-bottom:1px solid gray;
}
h3:hover
{
background-color:#E1E1E1;
cursor:pointer;
}
p
{
padding:8px;
display:none;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
//設置一個變量flag用於標記元素狀態，是“滑下”還是“滑上”
var flag = 0;
$(function () {
$("h3").click(function () {
if (flag == 0) {
$("p").slideDown();
flag = 1;
}
else{
$("p").slideUp();
flag = 0;
}
});
})
</script>
</head>
<body>
<div id="wrapper">
<h3> 學習網簡介</h3>
<p> 學習網成立於2015年4月1日，是一個富有活力的技術學習網站。 學習網為廣大網絡工作者（網頁開發人員、站長等）提供各種精品教程以及最精華資料。 學習網跟其他垃圾采集站不一樣， 學習網中的每一個課程、每一篇文章，甚至每一個知識點，都凝聚了本人的最辛勤的汗水。多少日日夜夜，本人嘔心瀝血在一遍一遍地編輯，為的是給廣大網站愛好者提供最精華的知識。</p>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們第1次點擊標題時，內容會“滑下”；當我們第2次點擊標題時，內容會“滑上”，以此類推。對於滑動動畫的實現，我們需要定義一個變量flag來判斷當前元素的滑動狀態，然後根據這個變量來決定是否執行“滑上”還是“滑下”。
當使用slideDown()和slideUp()，我們需要用一個變量來判斷當前元素的滑動狀態，然後根據這個變量來決定是否執行slideDown()還是slideUp()方法。這種處理方式似乎顯得有點復雜。
在jQuery中，我們還有一種實現滑動效果的簡單方法，那就是slideToggle()。我們可以使用slideToggle()方法來切換元素的“滑動狀態”。也就是說，如果元素是滑下狀態，則變成滑上狀態；如果元素是滑上狀態，則變成滑下狀態。這個跟toggle()、fadeToggle()這兩個方法是類似的。
語法：
slideToggle(speed , callback)
說明：
speed為可選參數，表示動畫執行的速度，單位為毫秒，默認值為200毫秒。如果參數省略，則采用默認速度。
callback為可選參數，表示動畫執行完成之後的回調函數。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
#wrapper
{
text-align:left;
display:inline-block;
width:300px;
border:1px solid silver;
}
h3
{
text-align:center;
padding:10px;
background-color:#F1F1F1;
border-bottom:1px solid gray;
}
h3:hover
{
background-color:#E1E1E1;
cursor:pointer;
}
p
{
padding:8px;
display:none;
}
</style>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("h3").click(function () {
$("p").slideToggle();
});
})
</script>
</head>
<body>
<div id="wrapper">
<h3> 學習網簡介</h3>
<p> 學習網成立於2015年4月1日，是一個富有活力的技術學習網站。 學習網為廣大網絡工作者（網頁開發人員、站長等）提供各種精品教程以及最精華資料。 學習網跟其他垃圾采集站不一樣， 學習網中的每一個課程、每一篇文章，甚至每一個知識點，都凝聚了本人的最辛勤的汗水。多少日日夜夜，本人嘔心瀝血在一遍一遍地編輯，為的是給廣大網站愛好者提供最精華的知識。</p>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
在實際開發中，對於滑動動畫，slideToggle()方法相對slideUp()和slideDown()來得更加方便。