Animation
- 显示/隐藏:show， hide， toggle
- 滑动：slideDown，slideUp，slideToggle
- 淡入淡出：fadeIn， fadeOut， fadeToggle， fadeTo
- 自定义：animate，stop，delay
显示/隐藏
- show( ): 显示
$("#btn").click(function(){
$("div").show()
})
- hide( ): 隐藏
$("#btn").click(function(){
$("div").hide()
})
- toggle( ): 显示/隐藏切换
$("#btn").click(function(){
$("div").toggle()
})
滑动
- slideDown( ): 动画效果，只调整元素的高度，可以使匹配的元素以“滑动”的方式（向下增大）显示出来
$("#btn").click(function(){
$("img").slideDown()
})
- slideUp( ): 动画效果，通过高度变化，使匹配的元素以“滑动”的方式（向上减小）隐藏起来
$("#btn").click(function(){
$("img").slideUp()
})
- slideToggle( ): 动画效果，切换匹配元素的可见性
$("#btn").click(function(){
$("img").slideToggle()
})
淡入淡出
- fadeIn( ): 通过不透明度的变化来实现所有匹配元素的淡入效果，即显示
$("#btn").click(function(){
$("img").fadeIn()
})
- fadeOut( ): 通过不透明度的变化来实现所有匹配元素的淡出效果，即隐藏
$("#btn").click(function(){
$("img").fadeOut()
})
- fadeToggle( ): 开关所匹配元素的淡入和淡出效果
$("#btn").click(function(){
$("img").fadeToggle()
})
注意
以上方法 show， hide， toggle，slideDown，slideUp，slideToggle，fadeIn， fadeOut， fadeToggle 可以传三个参数 show([speed],[easing],[fn])
| 参数 | 描述 |
|---|---|
| peed | 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) |
| easing | (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" |
| fn | 在动画完成时执行的函数，每个元素执行一次。 |
$("#btn").click(function(){
$("img").fadeOut("fast","linear",function(){
console.log("Animation Done.");
})
- fadeTo( ) : 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
show([speed],opacity,[easing],[fn])参数opacity：指定的不透明度
$("#btn").click(function(){
$("img").fadeTo("fast", 0.25,"linear",function(){
console.log("Animation Done.");
})
