动画效果
网页中的特效,一般都是用JavaScript编写的
显示与隐藏
显示方法:show([speed,callback])
无参数情况下,只能硬性显示,没有动画效果
speed:动画速度,以毫秒为单位
callback:回调函数,当显示效果完成后,调用
隐藏方法:hide([speed,callback])
无参数情况下,只能硬性隐藏,没有动画效果
speed:动画速度,以毫秒为单位
callback:回调函数,当隐藏效果完成后,调用
逐个显示
object.first().show(800,function callback(){
$(this).next().show(800,callback());
})
逐个隐藏
object.last().hide(800,function callback(){
$(this).prev().hide(800,callback());
})
隐藏兼显示:toggle([speed,callback,bool])
无参情况下硬性显示或隐藏
speed:动画速度,以毫秒为单位
callback:回调函数,当隐藏效果完成后,调用
bool:规定 toggle 是否隐藏或显示所有被选元素
-
-
- True - 显示所有元素
- False - 隐藏所有元素
-
滑动显示与隐藏
显示方法:slideDown([speed,callback])
无参数情况下,以默认速度显示
speed:动画速度,以毫秒为单位
callback:回调函数,当显示效果完成后,调用
隐藏方法:slideUp([speed,callback])
无参数情况下,只能硬性隐藏,没有动画效果
speed:动画速度,以毫秒为单位
callback:回调函数,当隐藏效果完成后,调用
隐藏兼显示:slideToggle([speed,callback])
无参情况下硬性显示或隐藏
speed:动画速度,以毫秒为单位
callback:回调函数,当隐藏/显示效果完成后,调用
淡入与淡出
淡入方法:fadeIn([speed,callback])
无参数情况下,以默认速度显示
speed:动画速度,以毫秒为单位
callback:回调函数,当显示效果完成后,调用
淡出方法:fadeOut([speed,callback])
无参数情况下,只能硬性隐藏,没有动画效果
speed:动画速度,以毫秒为单位
callback:回调函数,当隐藏效果完成后,调用
淡入兼淡出:fadeToggle([speed,callback])
无参情况下硬性显示或隐藏
speed:动画速度,以毫秒为单位
callback:回调函数,当隐藏效果完成后,调用
改变透明度:fadeTo(speed,opacity[,callback])
speed:动画速度,以毫秒为单位
opacity:透明度改变范围,0~1
callback:回调函数,当改变透明度效果完成后,调用
自定义动画
方法:animate({
key1:value1,
key2:value2,...
}[,speed,easing,callback])
key:value:CSS样式键值对
speed:动画速度
callback:回调函数,动画效果完成后,调用
easing:动画运动效果,参数为swing时,动画缓速运动,即中间快,两边慢;参数为linear时,动画匀速运动
可在value前加"+="或"-=",使其累增或累减
列队动画:调用动画的函数按顺序执行
使用嵌套的回调函数,函数将按顺序执行
使用连缀和顺序执行,实现列队动画,对象为同一个
动画方法
stop(clearQueue,gotoEnd):
没有参数的情况下,停止列队动画的第一个动画,余下动画继续执行
第一个参数为true时,停止列队动画,并清空余下的动画
第二个参数为true时,直接将正在执行的列队动画跳到末状态
delay(time):设置时间延迟效果
:animated:查找正在执行的动画,$(":animated")表示正在执行的动画
全局属性
$.fx.interval:设置动画的帧数,默认为13
$.fx.off:关闭动画,默认为false