01第1节：jQuery滑动概述
#JavaScript#在jQuery中，针对Html元素可以轻松的实现滑动效果，滑动效果就像门帘一样，可以向下滑动，也可以向上滑动。
对于Html页面上的所有元素，都是可以产生滑动效果的，也就是所有Html元素都可以使用jQuery的滑动功能。
jQuery封装的与滑动功能相关的方法有3个，分别为：
slideUp()方法：主要功能是向上滑动元素。slideDown()方法：主要功能是向下滑动元素。slideToggle()方法：主要功能是在向上和向下来回切换滑动效果。在jQuery中使用这3个滑动的方法之前，首先要使用选择器获取Html元素对象，然后再使用方法实现滑动效果。
02第2节：slideDown()方法的使用
jQuery中的slideDown()方法的主要功能是将在Html页面上隐藏的元素使用向下滑动的方式显示出来。可以想像门帘的功能，当放下后，就会将门口盖住。slideDown()方法的功能也是如此。
slideDown()方法的基本语法如下：
$(selector).slideDown(speed,callback);
基本语法说明如下：
第1个参数speed是可选的，用于设置向下滑动的速度，可以设置slow、fast和具体的一个毫米数字。第2个参数callback也是可选的，用于设置滑动完成后所执行的函数名称。<!DOCTYPE html><html><head><title>jQuery滑动效果</title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function fslideDown() {$("#div1").slideDown(2000);}</script></head><body><input id="Button1" type="button" value="向下滑动" onclick="fslideDown()"/><div id="div1" style="background-color:#808080;width:300px; height:200px; display:none"></div></body></html>
在此Html代码中，对id=div1的元素执行向下滑动的特效，运行一下：
图1
在上图中，我们看到了网页上的一个按钮，点击它一下，如图2所示：
图2
此时，div开始向下以滑动的方式，将div块显示出来了。这就是slideDown()方法实现的效果功能。
03第3节：slideUp()方法的使用
jQuery的slideUp()方法的主要功能是将已显示的元素以向上滑动的方式隐藏起来，像卷帘子一样将帘子卷起来，露出门口。
Html代码+jQuery代码如下：
<!DOCTYPE html><html><head><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function fslideDown() {$("#div1").slideDown(2000);}function fslideUp() {$("#div1").slideUp(2000);}</script></head><body><input id="BtnSlide" type="button" value="向下滑动" onclick="fslideDown()"/><input id="Button1" type="button" value="向上滑动" onclick="fslideUp()" /><div id="div1" style="background-color:#808080;width:300px; height:200px; display:none"></div></body></html>
在这段Html代码中，使用了slideUp()和slideDown()方法分别实现了向上和向下滑动，效果如下：
图3
在上图中，可以单击页面上的2个按钮实现Html元素的上下滑动。
04第4节：slideToggle()方法
jQuery的slideToggle()方法可以实现向上和向下滑动功能的切换，也就是slideUp()和slideDown()方法的功能合体。
slideToggle()方法的基本语法如下：
$(selector).slideToggle(speed,callback);
该方法中的参数与上面的slideUp()和slideDown()方法的含义是一样的。
实战一下，在页面上使用slideToggle()方法演示一下效果：
<!DOCTYPE html><html><head><title></title><script src="jquery-3.3.1.js"></script><script type="text/javascript">function fslideDown() {$("#div1").slideDown(2000);}function fslideUp() {$("#div1").slideUp(2000);}function fslideToggle() {$("#div1").slideToggle(2000);}</script></head><body><input id="Button1" type="button" value="向下滑动" onclick="fslideDown()"/><input id="Button2" type="button" value="向上滑动" onclick="fslideUp()" /><input id="Button3" type="button" value="滑动切换" onclick="fslideToggle()" /><div id="div1" style="background-color:#808080;width:300px; height:200px; display:none"></div></body></html>
在此段代码中，有向上、向下和二者切换效果。运行结果如下：
图4
这里主要测试第三个按钮，一个按钮实现Html元素向上和向下滑动的效果。
现在实验一下：
图5
此时，会将隐藏的DIV元素从上向下的方式滑动出来，再次点击“滑动切换”按钮，则会将DIV元素从下向上的方式滑动隐藏起来。