jQuery动画

jQuery动画

基本动画效果

• 显示隐藏：show()/hide()

  • hide(duration)通过改变元素的高度、宽度、和不透明度，直到这三个属性值到0
  • show(duration)通过改变元素的高度、宽度、和不透明度，直至内容完全可见

• 滑动（通过改变高度）

  • slideDown([speed,callback])：
    1. 显示元素
    2. 不断改变高度，直到样式内设定的值
  • slideUp([speed,callback])：
    1. 不断改变高度，直到0
    2. 隐藏元素
  • slideToggle([speed,callback])
    当元素隐藏时调用slideDown()，当元素显示时调用slideUp()

• 淡入淡出（通过改变不透明度）

  • fadeIn:
    1)显示元素
    2)不断改变透明度直到1
  • fadeOut:
    1)不断改变透明度直到0
    2)隐藏元素

  • fadeToggle([speed,callback])

  • fadeTo([[speed],opacity,[fn]]) 不断改变透明度opacity，直到设定的值，并在动画完成后可选地触发一个回调函数。

PS：jQuery动画由三种预设速度slow,normal,fast（600，400，200）