Create jQuery like fadeIn animation with javascript

Hi Guyz in this tutorial i am going to teach u how to create a jQuery like fadeIn() animation with javascript

live Demo Download Script Watch Video Tutuorial

html

html is Super easy in this we have a div and a button. And when we click the button div is fadeIn()

<button id="button">Click me</button>
<div id="div">a</div>

css

In css we are styling the div so that we can see it and giving it the property of display:none; so that it will be shown dynamicaly

<style type="text/css">
#div{
	background: cornflowerblue;
	height: 150px;
	width: 200px;
	padding: 10px;
	display: none;
}
</style>

javascript

The main role is of javascript and all the work is done by the javascript and we fire of the fadeIn() function and that function do the work

<script type="text/javascript">
	var btn = document.getElementById('button');
	btn.addEventListener('click', function(){
		var i = 0,
			el = document.getElementById('div');
		fadeIn(el, i);
	}, false);

	function fadeIn(el, i){
		el.style.display = 'block';
		i = i + 0.01;
		setOp(el, i);

		if(i<1){
			setTimeout(function(){
				fadeIn(el, i);
			},50);
		}
	}

	function setOp(el, i){
		el.style.opacity = i;
	}
</script>