隐藏显示
.show();【显示】参数可选:速度:"slow"、"fast","normal或(单位毫秒),过渡效果:jq自身提供"linear" 和 "swing"(默认),函数:结束后执行
代码举例: $(".btn").click(function(){ $("div").hide(500,"linear",function(){alert("div显示成功");}); });
.hide();【隐藏】,可选参数与.show()相同
淡入淡出
.fadeIn() 【淡入】可选参数同上
.fadeOut()【淡出】 同上
.fadeToggle()【切换淡入淡出】同上
.fadeTo()【颜色】过渡效果:opacity:一个0至1之间表示透明度的数字。其余效果同
滑动【对高度更改】 ( 参数同show() )
.slideDown() 【下滑】
.slideUp()【下滑】
.slideToggle()【切换上滑下滑】
自定义动画
.animate()
参数:params:动画更改css属性,需要将position 属性设置为 relative、fixed 或 absolute,可同时更改多个属性,例如:.animate({ left:'250px', opacity:'0.5', height:'150px', }); 。
可使用队列功能:动画按顺序进行 例如:
.animate({height:'300px'}).animate({width:'300px'});.animate({height:'100px'}).animate({width:'100px'});
先高度更改为300px;动画结束再宽度300px;结束再高度100px;动画结束继续宽度100px。(同一属性可多次定义动画,并可以有链式操作)
停止动画:
.stop(); 将动画停止在当前状态
.finish(); 将动画停止在结束状态