滑动效果
jQuery中用于控制元素上滑和下滑效果的方法如表1所示。
表1 控制元素的上滑和下滑
| 方法 | 说明 |
|---|---|
| slideDown([speed],[easing],[ fn]) | 垂直滑动显示匹配元素（向下增大） |
| slideUp([speed,[easing],[ fn]]) | 垂直滑动显示匹配元素（向上减小） |
| slideToggle([speed],[easing],[ fn]) | 在slideUp()和slideDown()两种效果间的切换 |
在表1中，参数speed、easing和fn与前面讲过的show()、hide()等方法的参数功能一致，后续将不在赘述。
为了读者更好的理解，接下来通过代码演示slideUp()和slideDown()方法的使用。前面讲解DOM时，开发过一个下拉菜单的案例，在学习了jQuery以后，就可以使用jQuery更快速地完成这个案例。具体步骤如下。
（1）编写HTML结构，具体代码如下。CSS样式请参考配套源码。
1 <ul class="nav">
2 <li>
3 <a href="#">微博</a>
4 <ul>
5 <li><a href="">私信</a></li>
6 <li><a href="">评论</a></li>
7 <li><a href="">@我</a></li>
8 </ul>
9 </li>
10 ...（省略了结构代码，可以参考源代码）
11 </ul>利用jQuery实现鼠标滑动切换效果，具体代码如下。
1 $(".nav > li").mouseover(function() {
2 $(this).children("ul").slideDown(200);
3 });
4 $(".nav > li").mouseout(function() {
5 $(this).children("ul").slideUp(200);
6 });上述代码中，第1~3行为li元素添加鼠标移入事件，当鼠标移入li元素时通过第2行代码实现菜单向下滑动效果。第4~6行代码中给li元素添加鼠标移出事件，当鼠标移出li元素时通过第5行实现菜单的向上滑动效果。
在浏览器中运行，效果如图1所示。
图1 下拉菜单
点击此处
隐藏目录
隐藏目录
