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