一、 显示与隐藏——hide(),show()
1. 方法:
- hide(speed,[callback]);
- show(speed,[callback]);
说明:这两个方法还可以实现带动画效果的显示隐藏。speed可以是“slow"(600毫秒)、"normal"(400毫秒)、"fast"(200毫秒),可以直接是毫秒数。
callback是动画执行完的回调函数。
2.实例:
二、切换显示隐藏——toggle()
1. 方法
- toggle():无参数,直接切换显示隐藏状态;
- toggle(switch):switch是布尔值,true显示元素,false隐藏元素。
- toggle(speed,[callback]):speed为切换速度;callback为动画效果执行之后的回调函数。
说明:当以动画效果展示时,元素的width,height,padding,margin都以动画形式展示。
2. 实例:
三、滑动效果——slide
- slideUp(speed,[callback]):向上滑动,减小元素高度至0
- slideDow(speed,[callback]):向下滑动,增大元素高度。
- slideToggle(speed,[callback]):以动画效果切换元素高度。
四、淡入淡出——fade
1. 淡入淡出方法
- fadeIn(speed,[callback]):淡入,透明度由0.0到1.0;
- fadeOut(speed,[callback]):淡出,透明度由1.0到0.0;
实例:
2. fadeTo(speed,opacity,[callback]):以动画效果将透明度设置为一个指定值,还可以设置回调函数。
实例:
五、自定义动画——animate
1.方法 :
animate(params,[duration],[easing],[callback])
说明:param表示要调整的属性键值对,duration表示速度,easing表示动画插件,callback表示动画效果完成后的回调效果。
注意:
params的属性名要使用骆驼写法,例如font-size要写成fontSize。
如果想以动画形式移动元素位置,则position必须设置为relative或者absolute。
队列动画:在元素中执行一个或者多个animate方法。