JQuery：动画（显示隐藏、淡入淡出、滑动）

1、显示/隐藏

• Hide(duration: String, easing: String, callback: Function) : 隐藏元素。
• show(duration: String, easing: String, callback: Function) : 显示元素。
• toggle() : 切换，元素显示则隐藏，隐藏则显示。

上面的三个方法都可以传参：

• duration：指定过渡动画的时间长短，默认是400，也可以写fast(200)或slow(800)
• easing：指定使用什么动画效果，默认是swing(摆动效果-秋千)，还有linear(线性)
• complete：指定动画效果完成后执行的函数
  

2、淡入/淡出

• fadeIn() ：用于淡入已隐藏的元素
• fadeOut() ：用于淡出可见元素
• fadeToggle() ：在 fadeIn() 与 fadeOut() 方法之间进行切换
• fadeTo(speed,opacity,callback) ：将被选元素的不透明度逐渐地改变为指定的值。
  

3、滑动

这三个方法的参数都可以传入动画完成的速度或回调函数

4、自定义动画 animate()

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。

注释：使用 “+=” 或 “-=” 来创建相对动画（relative animations）。

$("button").click(function(){
    
     
	$("div").animate({
    
     
		left:'250px',
		opacity:'0.5',
		height:'150px',
		width:'150px'
 	}); 
});

style可取值：

backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
注释：CSS 样式使用 DOM 名称（比如 “fontSize”）来设置，而非 CSS 名称（比如 “font-size”）。

5、stop

（1）作用：停止当前正在运行的动画。
（2）语法：$(selector).stop(stopAll,goToEnd)