, Please 
0
There are two things to consider when doing this: speed and increments. The lower the increment, the smoother the effect will be. Speed is self-explanatory.
Here's the basic JavaScript function:
function fadeIn(id,increment,speed){
var element = document.getElementById(id);
//Standard
var currentOp = element.style.opacity;
currentOp = currentOp*1+increment;
element.style.opacity = currentOp;
//IE
var IEOp = element.style.filter;
IEOp = IEOp.replace("alpha(opacity=","");
IEOp = parseInt(IEOp)+(increment*100);
element.style.filter = 'alpha(opacity='+IEOp+')';
if(currentOp<1){
var again = setTimeout(function(){ fadeIn(id); }, speed);
}
}
The increment should be between 0 and 1 (somewhere around 0.1 or 0.05) and the speed is in milliseconds (around 50 should work), but you can play with this yourself to get what you like. The id is the id of the element.
Similarly, to fade out, it would be the same function, but reversed.
function fadeOut(id,increment,speed){
var element = document.getElementById(id);
//Standard
var currentOp = element.style.opacity;
currentOp = currentOp*1-increment;
element.style.opacity = currentOp;
//IE
var IEOp = element.style.filter;
IEOp = IEOp.replace("alpha(opacity=","");
IEOp = parseInt(IEOp)-(increment*100);
element.style.filter = 'alpha(opacity='+IEOp+')';
if(currentOp>0){
var again = setTimeout(function(){ fadeOut(id); }, speed);
}
}
To put this function into action, you can do a number of triggers. You may want to do it when the document loads (body onload). Google uses onmouseover for the body.
Here's a simple html file to show you fade-in in action. It's actually a calculator of some sort I wrote a while back to do the 3x+1 puzzle. Anyways, here it is:
Note: the fadeIn function in this program only takes the ID as a parameter, so the speed was constant/increments were constant.
<html>
<head>
<title>© Michael Wu, 3x+1</title>
<style type="text/css">
body {
background:rgb(170,200,256);
padding:30px;
color:#009;
font-weight:400;
}
h1, h2, h4, h5, h6 {
text-align:center;
}
td {
text-align:center;
width:100px;
height:50px;
}
</style>
<script type="text/javascript">
function solve(start){
var datacount = 0;
var start = document.getElementById("start").value;
var inhtml = "<table border='1px' id='htmltab'><tr>";
if(start<=1||start.indexOf(".")!=-1){
alert("Invalid Input. Must be an integer greater than 1.");
}else{
var begin = new Date();
var startTime = begin.getTime();
start = parseInt(start);
while(start!=1){
if(start%2==0){
inhtml+="<td style='background-color:gray'>";
inhtml+=start+"/2 = ";
start = start*1/2;
inhtml+=start+"</td>";
}else{
inhtml+="<td style='background-color:white'>"+start+"*3+1 = ";
start = 3*start*1+1;
inhtml+=start+"</td>";
}
datacount++;
if(datacount%15==0){
inhtml+="</tr><tr>";
}
}
var stopTime = new Date();
var end = stopTime.getTime();
var diff = (end-startTime)/1000;
inhtml+="</tr></table><br /><br />";
inhtml+="<div style='text-align:center'>";
inhtml+=datacount+" steps in "+diff+" seconds.";
document.getElementById("html").innerHTML = inhtml;
document.getElementById("htmltab").style.opacity = 0;
document.getElementById("htmltab").style.filter = 'alpha(opacity=0)';
fadeIn("htmltab");
}
}
function fadeIn(id){
var element = document.getElementById(id);
//Standard
var currentOp = element.style.opacity;
currentOp = currentOp*1+0.1;
element.style.opacity = currentOp;
//IE
var IEOp = element.style.filter;
IEOp = IEOp.replace("alpha(opacity=","");
IEOp = parseInt(IEOp)+10;
element.style.filter = 'alpha(opacity='+IEOp+')';
if(currentOp<1){
var again = setTimeout(function(){ fadeIn(id); }, 65);
}
}
</script>
</head>
<body>
<h1>3x+1 puzzle</h1>
<hr />
<h3>Overview</h3>
<p>
<pre>
Although no proof exists, the 3x+1 puzzle states that any integer greater than 1 can eventually reach 1 through this algorithm.
If the number is even, then it is divided by 2. If it is odd, it is multiplied by 3 and added to 1.
This program explores this unproved theorem. After entering an initial value, it will calculate how many steps it takes and show you the steps.
Below, the <span style="color:gray"> GRAY </span> boxes show when the number is divided by 2. The <span style="color:white"> WHITE </span> boxes show when the number is multiplied by 3 and added to 1.
</pre>
</p>
<form>
Starting Value:
<input name="start" id="start" type="text" maxlength="9">
<input type="button" value="Go" onClick="solve()">
</form>
<div id="html"> </div>
<hr />
<div style="text-align:center" id="footer">
<h3>Design and Code © Michael Wu, 2009</h3>
</div>
</body>
</html>
