jQuery的上卷下拉效果

Query 中提供了一种动画的上卷下拉效果
jQuery中下拉动画slideDown()
对于隐藏的元素，在将其显示出来的过程中，可以对其进行一些变化的动画效果。
之前学过了show方法，show方法在显示的过程中也可以有动画，但是.show()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作。
这里将要学习一个新的显示方法slideDown方法
slideDown([speed速度],[easing],[fn])
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
参数说明：
speed:三种预定速度之一的字符串(“slow慢”,“normal正常”, or “fast快”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，参数easing默认有两个效果：“linear"和"swing”.
引入之后，easing参数可选的值就有以下32种：
linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInSine
easeOutSine
easeInOutSine
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
fn在动画完成时执行的函数，每个元素执行一次。

（1） slideDown 下拉动画

（2） slideUp 上卷动画

（3） slideToggle 上卷下拉动画的切换。
slideDown和slideUp是相反的方法，需要对元素进行上卷下拉动画的切换。
即ideToggle([speed],[easing],[fn])
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
参数说明：
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

动画的效果就不进行动态的演示了，下面是几张不同时间的图片。
未点击按钮时：

点击下拉按钮

点击上卷按钮（恢复原样）

点击切换按钮
(两张不同时间的图片)