Image Slider Using CSS3 Key Frame Animation Without Jquery Plugins

In this tutorial we are going to learn how to create a image slider with css3 key frame animation without using jQuery or JavaScript, So Lets Get Started Live Demo Download Script

Read more

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>