jQuery-基础包预设动画&自定义动画

显示/隐藏

(链接)原生js动画实现方法

动画效果

函数名	动画效果
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});
/* ... */