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
Fibonacci Number
The following is code I wrote while taking CS 161 at UCLA. This code calculates the Nth number in the Fibonacci Number sequence and is implemented in Lisp. Lisp is quite handy for this type of inherently recursive task.
The former solution, FIB, follows the same model as the sequence is mathematically defined: F(1) = 1 and F(N) = F(N-1) + F(N-2). The big-O of this function however is approximately O(N^2). The latter solution, FASTFIB, only uses one recursive call rather than two, keeping track of the last two numbers to calculate the next. It therefore only has a big-O of approximately O(N).
; FIB takes one integer N and returns the ; nth number in the Fibonacci sequence defined: ; FIB(N) = FIB(N-1) + FIB(N-2) ; and FIB of 1, 2, and 3 are 1, 1, and 2 respectively ; ; Inputs: N - a positive integer ; Output: the Nth Fibonacci Number (defun FIB (N) (cond ((<= N 2) 1) (t (+ (FIB (- N 1)) (FIB (- N 2)))))) ; LAST2 takes one integer N and returns a list ; containing the N-1th and Nth Fibonacci numbers ; respectively ; ; Inputs: N - a positive integer ; Output: a list containing the (N-1)th and Nth ; Fibonacci numbers (defun LAST2 (N) (cond ((<= N 2) (list 1 1)) (t (let ((prev2 (LAST2 (- N 1)))) (list (cadr prev2) (+ (car prev2) (cadr prev2))))))) ; FASTFIB is the same as FIB except it uses auxilary ; function LAST2 too compute the Nth Fibonacci Number ; in approximately N additions ; ; Inputs: N - a positive integer ; Output: the Nth Fibonacci Number (defun FASTFIB (N) (cadr (LAST2 N))) |
Download: Fibonacci.lsp