了解jQuery简单动画

JavaScript语言本身不支持动画设计，必须通过改变CSS来实现动画效果，下面我们来简单介绍一下jQuery 动画：

显示/隐藏

1.显隐动画

show():显示

hide():隐藏

原理：hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0，show()从上到下增加元素的高度，从左到右增加元素的宽度，从0到1增加透明度，直至内容完全可见。

参数：show()

show(speed,callback)

speed:字符串（slow、normal、fast）或数字，表示动画运行多久。

callback：动画完成时实行的方法（function(){}）

2.显隐切换

toggle():切换元素的可见状态

原理：匹配元素的宽度、高度以及不透明度，同事进行动画，隐藏动画后将display设置为none

参数：toggle(speed)

toggle(speed,callback)

toggle(boolean)

speed：同上

callback：同上

boolean：true为显示，false为隐藏

3.滑动

1)显隐滑动效果

slideDown():滑动显示

slideUp():滑动隐藏

参数：slideDown(speed, callback)

slideUp(speed,callback)

2)显隐切换滑动

slideToggle():显隐滑动切换

参数：slideToggle(speed,callback)

4.渐变：通过改变不透明度

1)淡入淡出
 fadeIn()
 fadeOut()
参数：fadeIn(speed,callback)

 fadeOut(speed,callback)
2)设置淡出透明效果

fadeTo():以渐进的方式调整到指定透明度

参数：fadeTo(speed,opacity,callback)

3)渐变切换结合fadeIn和fadeOut

fadeToggle()

参数：fadeToggle(speed,callback)

5.自定义动画

animate()