jquery常用动画效果及使用

动画效果:
1.显示/隐藏动画效果
动态的改变当前元素的宽,高和不透明度

	show([duration],[fn]);		//显示当前元素
	hide([duration],[fn]);		//隐藏当前元素
	toggle([duration],[fn]);	//切换当前元素的可见状态
	duration:动画效果运行的时间,默认为0,立即显示元素
		关键字:"slow","normal","fast" - 0.6,0.4,0.2秒
		数字:600,400,200,... 单位是毫秒
	fn:在动画完成时执行的函数

2.淡入/淡出动画效果
动态的改变当前元素的透明度(其他不变)

	fadeIn([duration],[fn])		//显示当前元素	- 淡入效果
	fadeOut([duration],[fn])	//隐藏当前元素   - 淡出效果
	fadeToggle([duration],[fn])	//切换当前元素的可见状态	-- duration默认为normal,0.4秒
	fadeTo([duration],opacity,[fn])	//在指定时间内,从当前透明度淡到指定透明度
	opacity:指定不透明值,取值范围是0-1,0代表完全透明,1代表完全不透明

3.滑入/滑出动画效果
动态的改变当前元素的高度(其他不变)

	slideDown([duration],[fn])		//显示当前元素	- 由上到下滑入
	slideUp([duration],[fn])		//隐藏当前元素	- 由下到上滑出
	slideToggle([duration],[fn])	//切换当前元素的可见状态

4.自定义动画
动态的改变当前元素的各种CSS属性

	animate(properties,[duration],[fn])
	properties:使用一个"name:value"形式的对象,{name:value,name:value,...},用来设置改变的css属性
	animate():只能改变可以取数字值的css属性,如大小,边框,定位,字体,背景,...
	移动元素是需要显示元素的position属性为absolute/relative.
	"队列"动画:元素执行多个动画效果,即元素执行多个animate()方法,按照方法的顺序进行动画效果的展示.

5.动画停止
stop()结束当前动画,立即进入到下一个动画

	stop([clearQueue],[gotoEnd])
	clearQueue:是否清空未执行完的动画队列.设置true,可以立即结束动画
	gotoEnd:是否立即完成正在执行的动画.设置true,并且重设show和hide的原始样式,调用回调函数等
posted @ 2019-04-13 02:44  zlgSmile  阅读(426)  评论(0编辑  收藏  举报