Fadein and Fadeout effect through javascript example

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>

Published by

Purab

I am Purab from India, Software development is my profession and teaching is my passion. Programmers blog dedicated to the JAVA, Python, PHP, DevOps and Opensource Frameworks. Purab's Github Repo Youtube Chanel Video Tutorials Connect to on LinkedIn

3 thoughts on “Fadein and Fadeout effect through javascript example”

Leave a Reply

Your email address will not be published.