第六节：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等