Many times we need the fadein and fadeout effect using javascript. Javascript tutorial for, Fadein and Fadeout effect through javascript example. But many developers go for jquery for using simple fadein and fadeout effect
Fadein and Fadeout effect through javascript example
I suggest not to Jquery and Use following code for effect. This is very minimal code and you can very easily customize the CSS and javascript as per your requirement.
<html>
<head>
<style type="text/css">
.popup {
border: solid 1px #333;
font-family: Tahoma;
font-size: 12px;
display: none;
position: absolute;
width: 300px;
z-index: 60;
}
.popuptitle {
background: blue;
color: white;
font-weight: bold;
height: 15px;
padding: 5px;
}
.popupbody {
background: #ddd;
padding: 5px;
text-align: center;
}
#popup1 { top: 100px; left: 50px; }
#popup2 { top: 100px; left: 400px; }
</style>
<script type="text/javascript">
var fadeOpacity = new Array();
var fadeTimer = new Array();
var fadeInterval = 100; // milliseconds
function fade(o,d)
{
// o - Object to fade in or out.
// d - Display, true = fade in, false = fade out
var obj = document.getElementById(o);
if((fadeTimer[o])||(d&&obj.style.display!='block')||(!d&&obj.style.display=='block'))
{
if(fadeTimer[o])
clearInterval(fadeTimer[o]);
else
if(d) fadeOpacity[o] = 0;
else fadeOpacity[o] = 9;
obj.style.opacity = "."+fadeOpacity[o].toString();
obj.style.filter = "alpha(opacity="+fadeOpacity[o].toString()+"0)";
if(d)
{
obj.style.display = 'block';
fadeTimer[o] = setInterval('fadeAnimation("'+o+'",1);',fadeInterval);
}
else
fadeTimer[o] = setInterval('fadeAnimation("'+o+'",-1);',fadeInterval);
}
}
function fadeAnimation(o,i)
{
// o - o - Object to fade in or out.
// i - increment, 1 = Fade In
var obj = document.getElementById(o);
fadeOpacity[o] += i;
obj.style.opacity = "."+fadeOpacity[o].toString();
obj.style.filter = "alpha(opacity="+fadeOpacity[o].toString()+"0)";
if((fadeOpacity[o]=='9')|(fadeOpacity[o]=='0'))
{
if(fadeOpacity[o]=='0')
obj.style.display = 'none';
else
{
obj.style.opacity = "1";
obj.style.filter = "alpha(opacity=100)";
}
clearInterval(fadeTimer[o]);
delete(fadeTimer[o]);
delete(fadeTimer[o]);
delete(fadeOpacity[o]);
}
}
</script>
</head>
<body>
popup1',true);"/>
popup2',true);"/>
popup1"></pre>
<div>Fade Popup 1</div>
<pre>
<div>
<p>Press close to fade out this Popup</p>
<input type="button" value="Close" onClick="fade('popup1',false);"/>
</div>
</div>
popup2"></pre>
<div>Fade Popup 2</div>
<pre>
<div>
<p>Press close to fade out this Popup</p>
<input type="button" value="Close" onClick="fade('popup2',false);"/>
</div>
</div>
</body>
</html>