jQuery 动画

动画函数

.show()/.hide()

函数用于显示/隐藏所有匹配的元素。此外，还可以指定元素显示的过渡动画效果。如果元素本身是可见的，则不对其作任何改变。如果元素是隐藏的，则使其可见。
语法：

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

$('button:first-child').on('click', function(){
  $('div').show(1000, 'linear', function(){
    alert('显示完成时执行')
  })
})
$('button:nth-child(2)').on('click', function(){
  $('div').hide(1000, 'linear', function(){
    alert('隐藏完成时执行')
  })
})

.slideUp()/.slideDown()/.slideToggle()

.slideUp()函数用于隐藏所有匹配的元素，并带有向上滑动的过渡动画效果。
.slidDown()函数用于显示所有匹配的元素，并带有向下滑动的过渡动画效果。
.slideToggle()函数用于切换所有匹配的元素，并带有滑动的过渡动画效果。
语法：

.slideUp( [ duration ] [, easing ] [, complete ])/.slideDown( [ duration ] [, easing ] [, complete ])/.slideToggle( [ duration ] [, easing ] [, complete ] )

$('button:first-child').on('click', function(){
  $('div').slideUp(1000, 'linear', function(){
    alert('隐藏完成时执行')
  })
})
$('button:nth-child(2)').on('click', function(){
  $('div').slideDown(1000, 'linear', function(){
    alert('显示完成')
  })
})
$('button:nth-child(3)').on('click', function(){
  $('div').slideToggle(1000, 'linear')
})

.fadeIn()/.fadeOut()

.fadeIn()函数用于显示所有匹配的元素，并带有淡入的过渡动画效果。
.fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果。

$('button:first-child').on('click', function(){
  $('div').fadeIn(1000, 'linear', function(){
    alert('显示完成')
  })
})
$('button:nth-child(2)').on('click', function(){
  $('div').fadeOut(1000, 'linear', function(){
    alert('隐藏完成')
  })
})

.animate()

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

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});