1 基础动画
show([1000]) 显示元素[1秒内慢慢显示出来]
hide([1000]) 隐藏元素[1秒内慢慢隐藏起来]
fadeIn([1000]) 显示元素,只改变透明度
fadeOut([1000]) 隐藏元素,只改变透明度
slideDown([1000]) 由上到下,显示
slideUp([1000]) 由下到上,隐藏
2 自定义动画
animate(params,speed,callback)
params: 一个包含样式属性及值的映射
speed: 速度参数,可选
callback: 在动画完成时执行的函数,可选
简单动画
animate({"left":"500xp"},1000*3);
累加、累减动画
animate({"left":"+=500xp"},1000*3);
多重动画
animate({"left":"500xp","top":"500px"},1000*3);
顺序执行
animate({"left":"500xp"},1000*3);
animate({"top":"500xp"},1000*3);
综合动画
$(this).animate({"left":"400px","height":"200px","opacity":"1"},1000*3)
.animate({"top":"200px","width":"200px"},1000*3)
.fadeOut(1000*3);
3 动画进阶
动画回调函数
animate({"top":"200px","width":"200px"},1000*3,function(){
$(this).css("border","5px solid blue");
})
停止动画
stop([clearQueue][,gotoEnd])
clearQueue,可选,为Boolean值(true或false),是否清空没有执行的动画
gotoEnd,可选,是否直接将正在执行的动画跳转到末状态
判断是否处于动画状态
if(!$(element).is(":animated")){
}
控制速度的参数
毫秒 (比如 1500)
slow 慢
normal 正常
fast 快
4 其他动画
toggle() 如果元素可见则隐藏,隐藏则切换为显示
slideToggle() 通过高度切换匹配元素的可见性
fadeTo() 通过可见度切换元素的可见性+