Here's the contents of my fadeElem.js file.
Usage:
mFadeIn(document.getElementById('idOfElementToFade'), nameOfFunctionToCallWhenFadeComplete);
or, if you dont want to do anything when fading is complete, dont supply a callback
mFadeIn( document.getElementById('idOfElementToFade') );
mFadeOut has the same syntax, it just fades in the opposite direction.
var totalTime = 100;
var ANIMATION_STEPS = 10;
var ANIMATION_DELAY = totalTime / ANIMATION_STEPS;
function mFadeIn(element, callback)
{
element.style.opacity = "0.0";
element.style.display = "block";
var stepSize = 1 / ANIMATION_STEPS;
setTimeout(function(){mAnimStep(element,0,stepSize, true, callback)},ANIMATION_DELAY);
}
function mFadeOut(element, callback)
{
element.style.opacity = "1.0";
element.style.display = "block";
var stepSize = 1 / ANIMATION_STEPS;
setTimeout(function(){mAnimStep(element,0,stepSize, false, callback)},ANIMATION_DELAY);
}
function mAnimStep(element, iteration, stepSize, boolIsFadeIn, callback)
{
if (iteration < ANIMATION_STEPS)
{
if (boolIsFadeIn == true)
element.style.opacity = (iteration * stepSize);
else
element.style.opacity = (ANIMATION_STEPS - iteration) * stepSize;
iteration++;
setTimeout(function(){mAnimStep(element,iteration,stepSize,boolIsFadeIn, callback)}, ANIMATION_DELAY);
}
else
{
element.style.opacity = "";
if (boolIsFadeIn == false)
element.style.display = 'none';
if (!((callback==null)||(callback==undefined)))
{
callback();
}
}
}