Fader Documentation

The Fader Constructor

Syntax: new Fader(objects[, start=1[, end=0[, duration=500[, callbacks…]]]]);

The result of the default values is to fade out objects over a period of half a second.  For example:

1. // Fade out this example code
2. new Fader("example");
3. // Fade it back in
4. new Fader("example", 0, 1);

Execute the second line, then execute the fourth line

Arguments

objects

The object(s) to apply the fade effect to.  Can be specified as either a string ID of an element, the DOM element object itself, or an array of any combination of IDs and DOM objects.

start

The start opacity, a number from 0 to 1. Defaults to 1.

end

The end opacity, a number from 0 to 1. Defaults to 0.

duration

The duration of the animation, in milliseconds. Defaults to 500.

callbacks…

Functions to be called when the animation is completed (or the cancel() method called.

Properties of Fader Instances

callbacks

An array of callback functions.

currentOpacity

Whatever opacity was set on the elements the last time it was set.  Guranteed to be startOpacity immediately after the fader is created, and guranteed to be endOpacity after it has successfully completed.

duration

Computed value of the duration argument.

endOpacity

The computed value of the end argument.

isCompleted

True if the fader is done fading, or either cancel() or cancelSilently() has been called, false otherwise.

object

Equivalent to objects[0]—useful when only dealing with one element.

objects

An array of element objects that are being acted on.

startOpacity

The computed value of the start argument.

Methods of Fader Instances

addCallback(func)

Appends the function func to the array of callbacks.

cancel()

Cancels the fade, calling the callback functions and setting isCompleted to true.  The opacity of the elements being faded is left at currentOpacity.

cancelSilently()

Cancels the fade without calling any callback functions.  The opacity of the elements being faded is left at currentOpacity.

isFadingIn()

Returns true if the startOpacity is less than the endOpacity.

isFadingOut()

Returns true if the endOpacity is less than the startOpacity.

getTimeElapsed()

Returns the time since the fader object was created, maxing out at the duration of the fader object.

getTimeRemaining()

Returns duration - getTimeElapsed().  Guranteed to return no less than zero.

removeCallback(func)

Attempts to remove the callback function func, returning true if successful.

step()

Performs one “step” in the fade -- it sets the opacity as is appropriate, considering the time that has elapsed towards duration milliseconds.

More about callbacks

Callback functions are called in two cases: the completion of the animation, or if the cancel() method is called (the cancelSilently() method can be used to stop the fader without calling any callbacks). When called, they recieve two arguments:  object, which is equivalent to the first element in the objects array, and the fader object itself.

Two ready-made callback functions are included: Fader.displayNone() and Fader.displayBlock(), which set the display of all elements in the fader's objects array to "none" and "block", respectively.

Static Methods of Fader

Fader.now()

Returns (new Date()).getTime().

Fader.getElement(obj)

Wraps document.getElementById():  returns document.getElementById(obj) if obj is a string; otherwise returns obj directly.

Fader.displaySet(obj, fader, display)

Sets the style.display property of every member of the fader.objects array to display -- wrapped by Fader.displayNone() and Fader.displayBlock()

Fader.displayNone(obj, fader)

Sets the style.display property of every member of the fader.objects array to "none".

Fader.displayBlock(obj, fader)

Sets the style.display property of every member of the fader.objects array to "block".