Many times we need the fadein and fadeout effect using javascript. But many developers go for jquery for using the simple fadein and fadeout effect. 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>
<input type="button" value="Show Popup 1" onClick="fade('popup1',true);"/>
<input type="button" value="Show Popup 2" onClick="fade('popup2',true);"/>
<div id="popup1">
<div>Fade Popup 1</div>
<div>
<p>Press close to fade out this Popup</p>
<input type="button" value="Close" onClick="fade('popup1',false);"/>
</div>
</div>
<div id="popup2">
<div>Fade Popup 2</div>
<div>
<p>Press close to fade out this Popup</p>
<input type="button" value="Close" onClick="fade('popup2',false);"/>
</div>
</div>
</body>
</html>
Incoming search terms:
- javascript onclick fadeout page
- wordpress text fader
- wordpress plugin java post effects
- wordpress fade out
- on click div show fadein effect
- javascript onclick fade div in and out
- javascript fadein fadeout effect
- javascript fadein fadeout background effect
- javascript fade div over an array
- javascript div fade in wordpress
- image fade in fadeout effect using js
- fadeout javascript
- fade-out javascript
- fade out plugin for wordpress
- fade out effect javascript
- fade in fade out effect with jquery and css free download
I am grateful for this particular ideal commentary; this is the kind of point that prevents me though out the day.I’ve been hunting close to for ones web site soon after I noticed about them from a friend and was delighted when I was capable of come across it just after browsing for a while. Becoming a experienced blogger, I’m thrilled to see other folks taking gumption and adding to your neighborhood. I just needed to comment to display my appreciation on your submit as it is especially inviting, and many freelancers will not get the credit score they ought to have. I am positive I’ll be back again and will send out some of my friends.
good style of coding for fresher and also for experienced
Well written post, good researched and useful for me in the future.I am so happy you took the time and effort to make this. Kind regards
Hi, this is a very interesting blog page and ive enjoyed reading many of the articles and posts contained on the website, keep up the good work and hope to read some more interesting content in the future.
I REALLY liked your post and blog! It took me a minute bit to find your site…but I bookmarked it. Would you mind if I posted a link back to your post?
I’ve been checking your blog for a while now, seems like everyday I learn something new
Thanks
Of course, what a great site and informative posts, I will add backlink – bookmark this site? Regards, Reader
Nice post! You truly have a wonderful way of writing which I find captivating! I will definitely be bookmarking you and returning to your blog. In fact, your post reminded me about a strange thing that happened to me the other day. I’ll tell you about that later…
Great read. Thanks for the info!
Good! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?
good coding style for fresh script user also
thanks..