Simple Fade-In

Hey Javascripters,

I’m trying to implement a simple fade-in effect, using the following code which is meant for fading OUT (and does that just fine). In order to reverse it I’ve changed the 1 under “Set the starting opacity” to a 0, and under “Set the new opacity” I’ve changed the – to a +. This results in a mostly-transparent object that does not fade either way. What else do I need to change?

Thanks to [URL=”http://www.codeproject.com/KB/scripting/jscript_animation.aspx”]Perspx[/URL] for this code.

[CODE]<script language=”Javascript”>
..

//Detect browser for later use
browser = undefined;

if(navigator.userAgent.indexOf(“MSIE”)!=-1)
browser = “IE”;
else
browser = “Mozilla”;

//Called to fade element
function fade(element)
{
//We will fade the object in 10 steps
var steps = 10;

//Set the starting opacity
setOpacity(element, 1);

//Loops the timer function
for(i=0; i<steps; ++i) {
setTimeout(function(){fadeCallback(element);}, (30*i));
}
}

//Callback to timer function
function fadeCallback(element)
{
//Get the current opacity
var opacity=getOpacity(element);

//Set the new opacity
setOpacity(element, opacity-0.1);
}

//Gets an element’s opacity
function getOpacity(element)
{
var opacity = null;

//Get the opacity based on the current browser used
if(browser==”IE”) {
filter = element.style.filter;
if(filter) {
alpha = filter.split(“alpha(opacity=”);
opacity = alpha[1].substr(0,(alpha[1].length-1))/100;
}
}
else {
opacity = element.style.opacity;
}

return opacity;
}

//Sets an element’s opacity
function setOpacity(element, o)
{
//Set the opacity based on the current browser used
if(browser==”IE”) {
element.style.filter = “alpha(opacity=” + (o*100) + “)”;
}
else {
element.style.opacity = o;
}
}

..
</script>[/CODE]

Also in #JavaScript _↴