js不透明度渐变动画

本文由清尘发表于2014-01-12 21:23最后修改于2015-01-12属于javascript分类

通过指定的时间(默认是500毫秒)降低元素的不透明度,使得元素淡出和消失。
该函数在IE中不能正常,但也可以修改得能工作,除了opacity,IE使用非标准的filter属性
HTML代码:

<div id="test" style="background-color:#ff0000; font-size:14px;">1111</div>

JS代码:

<script type="text/javascript">
	function fadeout(e,oncomplete,time){
		if(typeof e==="string") e=document.getElementById(e);
		if(!time) time=500;
		//使用Math.sqrt作为一个简单的“缓动函数”来创建动画
		//精巧的非线性:一开始淡出得比较快,然后缓慢了一些
		var ease=Math.sqrt;
		var start=(new Date()).getTime();
		animate();
		function animate(){
			var elapsed=(new Date()).getTime()-start; //消耗的时间
			var fraction=elapsed/time; //总时间的几分之几
			if(fraction<1){ //如果动画未完成
				var opacity=1-ease(fraction);
				e.style.opacity=String(opacity); //设置在e上
				setTimeout(animate,Math.min(25,time-elapsed));
			}else{ //动画完成
				e.style.opacity="0"; //使e完全透明
				if(oncomplete) oncomplete(e); //调用完成后的回调函数
			}
		}
	}
	fadeout("test");
	</script>