jQuery 动画

基础

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

用于显示元素。

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

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

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

滑动

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

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

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

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

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

用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。

如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。
例：

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

渐变

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

通过淡入的方式显示匹配元素，参数含义和上面相同

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

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

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

自定义动画

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

properties是一个CSS属性和值的对象,动画将根据这组对象移动。
例：

$('#btn1').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
})