Java Script Fade In / Fade Out Effect
I was recently coding up a webpage for a friend and I found myself writing multiple different fairly complicated pieces of code to do a fairly simple fade effect. A fade in or out transition between pages or between message banners can really add a nice effect to a webpage. It is surprisingly complicated though to get it working in the way you want setting the delays before each chance of alpha level and also handling the different css properties necessary to be compatible with all browsers.
Here I have unified the code for this under an API in one file that can be included and allow for a dynamic and easy to use interface that works with any HTML DOM element. The code is attached and included below.
var Xt = {
FadeIn: function (element, time, checkVis, callbackFunction) {
if (!time) {
time = 2000;
}
if (!callbackFunction) {
callbackFunction = function () {};
}
var inc = 10000/time;
if (checkVis && element.style.opacity)
alpha = parseInt(element.style.opacity)*100;
else
alpha = 0;
function iterator () {
if (alpha >= 100) {
element.style.opacity = 1.0;
element.style.filter = 'alpha(opacity = 100)';
callbackFunction();
return;
}
else {
element.style.opacity = alpha/100;
element.style.filter = 'alpha(opacity = ' + alpha + ')';
setTimeout(iterator, 100);
}
alpha += inc;
};
iterator();
},
FadeOut: function (element, time, checkVis, callbackFunction) {
if (!time) {
time = 2000;
}
if (!callbackFunction) {
callbackFunction = function () {};
}
var inc = 10000/time;
var alpha;
if (checkVis && element.style.opacity)
alpha = parseInt(element.style.opacity)*100;
else
alpha = 100;
function iterator () {
if (alpha <= 0) {
element.style.opacity = 0.0;
element.style.filter = 'alpha(opacity = 0)';
callbackFunction();
return;
}
else {
element.style.opacity = alpha/100;
element.style.filter = 'alpha(opacity = ' + alpha + ')';
setTimeout(iterator, 100);
}
alpha -= inc;
};
iterator();
}
};
|
Below is the documentation on the two functions.
Xt.FadeIn(DOM Element, [Length of Effect], [Start from Current Opacity Level], [Callback Function]) Xt.FadeOut(DOM Element, [Length of Effect], [Start from Current Opacity Level], [Callback Function]) The fade functions provide a fade in effect for any HTML element on a web page by adjusting the css style's opacity property. This function can be applied to any DOM element such as an image or a div containing the entire page. The function can be used by including this file then merely referencing the Xt.FadeIn or Xt.FadeOut functions. Parameters: DOM Element - Any HTML DOM element which can be passed from JavaScript code using the document.getElementById function or the this object in onclick or onmouseover events. Length of Effect (Optional) - The duration of time the fade effect should last for, measured in milliseconds. Start from Current Opacity Level (Optional) - A boolean value which if set to true will start the effect from the current opacity level of the object rather than automatically setting the initial opacity. Callback Function (Optional) - A function that will be called upon the effect terminating. Function has no return value. |
Download the source code here: Xt Java Script Fade Extension