// Script and lesson by Adam Khoury @ www.developphp.com
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
var target = document.getElementById(element);
target.style.display = "block";
var newSetting = fade_in_from / 10;
target.style.opacity = newSetting;
// opacity ranges from 0 to 1
fade_in_from++;
if(fade_in_from == 10){
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')',50);
}
function fadeOut(element){
var target = document.getElementById(element);
var newSetting = fade_out_from / 10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0){
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')',50);
}
<!-- This is the HTML file that needs fadeEffects.js -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<style type="text/css">
div.contentbox {
background:#1C9EFF;
width:300px;
height:100px;
padding:12px;
}
</style>
<script type="text/javascript" src="fadeEffects.js"></script>
</head>
<body>
<h2>Fade In and Out Without Frameworks</h2>
<button onclick="fadeOut('div1')">Fade Out</button>
<button onclick="fadeIn('div1')">Fade In</button>
<div id="div1" class="contentbox">Content Box</div>
<p>Content that lives under my box</p>
<button onclick="fadeOut('div2')">Fade Out</button>
<button onclick="fadeIn('div2')">Fade In</button>
<div id="div2" class="contentbox">Content Box</div>
<p>Content that lives under my box</p>
<button onclick="fadeOut('div3')">Fade Out</button>
<button onclick="fadeIn('div3')">Fade In</button>
<div id="div3" class="contentbox">Content Box</div>
<p>Content that lives under my box</p>
</body>
</html>
Javascript HTML5 Custom Fade Animation Functions Programming Tutorial