素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

フェードイン、フェードアウトのエフェクト

/*
animate({
element: HTMLElement,
style: String,
end: Number,

//option

begin: Number,
time: Number,
quality: Number
})
*/

function animate(property){
	var element=property.element;
	var style=property.style;
	var begin=property.begin||getComputedStyle(element,null)[style];
	var end=property.end;
	var ms=property.quality||100;
	var time=property.time||1000;
	
	var i=time/ms;

	var x=(begin-end)/i;
	(function(i){
	 element.style[style]=end+x*i;
	 if(i>0)setTimeout(arguments.callee,ms,i-1);
	 })(i);
}

function fadeIn(elem){
	animate({
		element:elem,
		style:'opacity',
		end:1
		});
}
function fadeOut(elem){
	animate({
		element:elem,
		style:'opacity',
		end:0
		});
}

fadeOut(document.body)

作ってみたけど、再帰してるからちょっと重いかも。