jQuery-基础包预设动画&自定义动画
显示/隐藏
动画效果
函数名 | 动画效果 |
---|---|
hide | overflow=hidden → width,height,margin,padding,opacity不断减小至0 → display=none |
show | display=none overflow=hidden width,height,margin,padding,opacity不断增加至源值 |
toggle | 自动判断以执行hide 或show |
hide(1800)
效果:
语法
hide,show,toggle语法都相同,所以只展示hide的语法
格式:hide(speed,easing,callback)
参数(*为可选) | 类型 | 含义 |
---|---|---|
*speed | String(预设值) 或 Number | 执行完所需要的时间(ms),默认为0,预设值有:slow(600),normal(400),fast(200) |
*easing | String | 要使用的缓动函数,自带两种:linear,swing(默认) |
*callback | Function | 回调函数,动画执行完后调用的函数 |
淡入/淡出
动画效果
函数名 | 动画效果 |
---|---|
fadeOut | opacity不断减小至0 → display=none |
fadeIn | display=none opacity不断增加至1 |
fadeToggle | 自动判断以执行fadeIn 或fadeOut |
fadeTo | display=none opacity不断减小或增加至设置值 |
fadeOut(1800)
效果:
语法
fadeIn,fadeOut,fadeToggle语法和hide相同,这里不展示,但要注意fade的speed默认值为400
fadeTo相比其他3个增加了指定opacity的功能,语法如下:
格式:fadeTo(speed,opacity,easing,callback)
参数(*为可选) | 类型 | 含义 |
---|---|---|
speed | ||
opacity | Number | 可设置0-1,指定要达到的opacity |
*easing | ||
*callback |
- 与 显示/隐藏的3个函数 和 fade的其他3个函数 相比,fadeTo始终会删除操作对象的display=none,即使执行
fadeTo(0)
前display=none
,也会先删除再执行,要注意这会造成对象不显示但占位 - 虽然除fadeTo外的其他3个函数speed默认值为400,但因为fadeTo分不清speed和opacity,所以fadeTo的speed不可省
滑入/滑出
动画效果
函数名 | 动画效果 |
---|---|
slideUp | overflow=hidden → height,margin(top|bottom),padding(top|bottom)不断减小至0 → display=none |
slideDown | display=none overflow=hidden height,margin(top|bottom),padding(top|bottom)不断增加至源值 |
slideToggle | 自动判断以执行slideUp 或slideDown |
语法
slide语法和hide相同,这里不展示,但要注意slide的speed默认值为400
自定义动画
语法
格式:animate(args,speed,easing,callback)
参数(*为可选) | 类型 | 含义 |
---|---|---|
args | object(用{}括起来的是对象) | 要实现效果的样式参数 |
*speed | 默认为400 | |
*easing | ||
*callback |
基础的jQuery包自定义动画只能实现数值类型参数的动画,要实现color等参数需要导入颜色插件 链接:jQuery ui,这里只展示基础包animate
参数书写格式
书写规范
var json={
width:100, //Number类型不加单位则默认为px
height:"12em", //String类型可以自定义单位
margin:"10", //String类型不加单位默认也为px
paddinLeft:0, //根据js命名规范,属性名必须写成驼峰式
"padding-top":0, //属性作为字符串则不必遵循js命名规范
"paddingRight":0, //属性作为字符串也可以写成驼峰式
opacity:0.5 //小数位的参数也可以实现动画
};
使用相对值
可以用 += 或 -= ,且只有这两种
var json={
fontSize:"+=10px",
height:"-=20"
};
使用预设值
可以把属性的动画值设置 显示/隐藏 小节中的hide,show,toggle
例如hide
:
var json={
width:"hide",
fontSize:"hide" //只要是数值型都可以
};
流程为:overflow=hidden
→ width,font-size不断减小至0
→ display=none
流程中的黄色部分为设置的参数,和自带的hide效果相比,只是替换了参数,其他部分不变
队列
有多个动画顺序进行时,可以依次由上至下书写:
car1.animate({height:100});
car1.animate({width:100});
car1.animate({width:200,height:200});
/* ... */