06-jQuery动画-1

第六节：JQuery动画-1

JavaScript语言本身不支持动画设计，必须通过改变CSS来实现动画效果！

1、显隐动画：show()显示；hide()隐藏

原理：
hide()：通过改变元素的高度宽度和不透明度，直到三个属性值到0
show()：通过上到下增加元素的高度，从左到右增加宽度，从0到1增加透明度，直到内容可见。
参数：show(speed,callback)
speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
callback: 动画完成时执行的方法
显示和隐藏式一对密不可分的动画形式

2、显隐 切换

toggle():切换元素的可见状态
原理：匹配元素的宽度、高度和不透明度，同时进行动画，隐藏动画后将display设置为none
参数：toggle()
toggle(speed)
toggle(speed,callback)
toggle(boolean)
speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
easing： 使用哪个缓冲函数来过渡的字符串(linear/swing)
callback： 动画完成时执行的方法
boolean:true为显示 false为隐藏

3、滑动

显隐滑动效果
slideDown():滑动隐藏
slidUp():滑动显示
参数:
slideDown(speed,callback)
slidUp(speed,callback)

4、显隐切换滑动

slideToggle():显隐滑动切换
参数:
slidUp(speed,callback)

5、渐变：通过改变不透明度

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

6、设置淡出透明效果

fadeTo()：以渐进的方式调整到指定透明度
参数：
fadeTo(speed,opacity,callback)

7、渐变切换:结合fadeIn和fadeOut

fadeToggle()
参数:
fadeOut(speed,callback)

8、自定义动画：animate()

注意：在使用animate方法之前，为了影响该元素的top left bottom right样式属性，必须先把元素的position样式设置为relative或者absolute

a、停止元素的动画
很多时候需要停止匹配正在进行的动画，需要使用stop()
stop()语法结构：stop([clearQueue],[gotoEnd]);
都是可选参数，为布尔值
如果直接使用stop()方法，会立即停止当前正在进行的动画
b、判断元素是否处于动画状态
如果不处于动画状态，则为元素添加新的动画，否则不添加
if(!$(element).is(":animated")){ //判断元素是否处于动画状态}
这个方法在animate动画中经常被用到，需要注意
c、延迟动画
在动画执行过程中，如果你想对动画进行延迟操作，那么使用delay()

用animate模拟show():
show: 表示由透明到不透明
toggle: 切换
hide:表示由显示到隐藏

动画方法总结
方法名 说明
hide()和show() 同时修改多个样式属性即高度和宽度和不透明度
fadeIn()和fadeOut() 只改变不透明度
slideUp()和slideDown() 只改变高度
fadeTo() 只改变不透明度
toggle() 用来代替show()和hide()方法，所以会同时修改多个属性即高度、宽度和不透明度
slideToggle() 用来代替slideUp和slideDown()方法，所以只能改变高度
fadeToggle() 用来代替fadeIn()和fadeOut方法，只能改变不透明度
animate() 属于自定义动画，以上各种动画方法都是调用了animate方法。此外，用animate方法还能自定义其他的样式属性，例如：left marginLeft scrollTop等