jQuery动画

.show( [duration ] [, easing ] [, complete ] )

用于显示元素

$('#btn-box1').on('click', function(){
      $('.box').show('normal')
    })

.hide([duration ] [,easing ] [,complete ])

用于隐藏元素，没有参数的时候等同于直接设置display属性

   $('#btn-box2').on('click', function(){
      $('.box').hide('normal')
    })

.slideDown( [duration ] [, easing ] [, complete ] )

用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

    $('#btn-box5').on('click', function(){
      $('.box').slideDown()
    })

.slideUp( [duration ] [, easing ] [, complete ] )

用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，
这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，
display 样式属性被设置为none，以确保该元素不再影响页面布局。
display 样式属性将被设置为none，以确保该元素不再影响页面布局。

    $('#btn-box6').on('click', function(){
      $('.box').slideUp()
    })

.fadeIn( [duration ] [, easing ] [, complete ] )

通过淡入的方式显示匹配元素

    $('#btn-box3').on('click', function(){
      $('.box').fadeIn()
    })

.fadeOut( [duration ] [, easing ] [, complete ] )

通过淡出的方式隐藏匹配元素

   $('#btn-box4').on('click', function(){
      $('.box').fadeOut()
    })

自定义动画

.animate( properties [, duration ] [, easing ] [, complete ] )

描述: 根据一组 CSS 属性，执行自定义动画。
properties
一个CSS属性和值的对象,动画将根据这组对象移动。
duration (默认: 400)
一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"，
三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
easing (默认: swing)
一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
complete
在动画完成时执行的函数。

.clearQueue

清除动画队列中未执行的动画

.finish

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态

.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画

  clearQueue(default: false)
  jumpToEnd(default: false)

具体的例子：http://js.jirengu.com/peyexidake/1/edit