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>
good coding style for fresh script user also
thanks..
good style of coding for fresher and also for experienced