一般隐藏的元素再显示出来是直接把整个元素呈现出来，从视觉角度来说，这样的呈现方式带着些许生硬，那如何让隐藏元素的呈现方式变得美观呢？下面我们来学习jQuery的上卷下拉动画效果，将隐藏元素呈现出来的过程中带着动画效果的变化。
先来看页面布局，详情如图：
页面布局：
源代码：（这里的布局使用了bootstrap插件）
CSS样式：
先把显示的元素隐藏起来，
最主要的是把jQuery的插件引入进来,因为我们写的这个动画效果是要依靠jQuery插件里面封装好的方法才得以实现的。
引入插件后我们就开始写jQuery的代码，
记得要先检测按钮的点击事件是否绑定成功，如果绑定不成功而继续往下敲代码只会事半功倍。
检测成功后，接着就引用jQuery封装好的方法。
来到页面上点击下拉动画按钮，隐藏的元素就会根据动画执行时间向下增大元素高度从而显示元素。
上卷动画的写法与下拉动画的相同，
同理,在页面上点击上卷动画按钮，显示的元素就会向上减小高度从而隐藏元素，
上卷下拉切换slideToggle,顾名思义，可以在元素隐藏或者显示的时候切换下拉或上卷的动画效果，点击一次执行一次切换，点击多次就执行多次切换
以上就是我们使用jQuery实现上卷下拉动画效果的过程。
注：以上为本人课堂学习总结