Fadein and Fadeout effect through javascript example

 

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

Fadein and Fadeout effect through javascript example

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>
3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *