Sunday, April 27, 2014

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


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>


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">
	background: cornflowerblue;
	height: 150px;
	width: 200px;
	padding: 10px;
	display: none;


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){ = 'block';
		i = i + 0.01;
		setOp(el, i);

				fadeIn(el, i);

	function setOp(el, i){ = i;