本節我們學習 jQuery 中的滑動，我們可以通過 slideDown()、slideUp()、slideToggle() 方法來實現元素的滑動效果。
slideDown()方法
slideDown() 方法用於實現元素向下滑動效果。如果元素已隱藏，則顯示被選元素。
語法如下：
$(selector).slideDown(speed,callback);
參數 speed 用於規定效果的時長，可選值有 slow、fast、毫秒。參數 callback 是滑動完成後所執行的函數名稱。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$(".down").click(function(){
$(".course").slideDown(1500);
});
});
</script>
</head>
<body>
<div>
<button class="down">點擊下滑展開元素</button>
<ul class="course" style="display: none;">
<li>Python同學計劃</li>
<li>PHP常見安全及錯誤處理</li>
<li>JavaScript基礎知識梳理</li>
<li>Node.js簡明入門</li>
<li>Python由淺入深入門</li>
</ul>
</div>
</body>
</html>
在瀏覽器中的演示效果：
上述代碼中，我們可以通過設置 slideDown() 方法所帶的參數，來控制指定元素的下滑所用時長。
slideUp()方法
slideUp() 方法用於實現元素向上滑動效果。如果元素已顯示，則隱藏被選元素。
語法如下：
$(selector).slideUp(speed,callback);
示例：
slideUp() 的功能其實和 slideDown() 方法剛好相呼應，我們來看一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$(".down").click(function(){
$(".course").slideUp(1500);
});
});
</script>
</head>
<body>
<div>
<button class="down">點擊上滑隱藏元素</button>
<ul class="course">
<li>Python同學計劃</li>
<li>PHP常見安全及錯誤處理</li>
<li>JavaScript基礎知識梳理</li>
<li>Node.js簡明入門</li>
<li>Python由淺入深入門</li>
</ul>
</div>
</body>
</html>
在瀏覽器中的演示效果： 
slideToggle()方法
slideToggle() 方法通過使用滑動效果來切換元素的可見狀態。如果被選元素是可見的，則隱藏這些元素，如果被選元素是隱藏的，則顯示這些元素。相當於在 slidedown() 和 slideup() 方法之間切換。
語法如下：
$(selector).slideToggle(speed,callback);
示例：
通過 slideToggle() 方法使用滑動效果來切換列表的可見狀態：
$(function(){
$(".down").click(function(){
$(".course").slideToggle(1000);
});
});
在瀏覽器中的演示效果： 