To fade from to in step(s), click  .

0 1 2 3
4 5 6 7
8 9 10 11
12 13 14 15

Did you see a transition? Not! The colors of the elements of the page were actually faded from one color to another. No kidding.

Hello. The Fader object is a Javascript constructor function. It creates a property called fade (which can optionally be named something else). The new property gives any object it refers to the ability to fade its background, foreground, and border colors from one color to another.

Try it out! Select an option, select one of the web-safe colors, then click on the GO button.

Maybe you noticed some browser objects, such as the scrollbars and - to a lesser degree - the select boxes and button, blinking or adjusting when the table's cells' colors where faded. This is caused by changing the rules of a document's styleSheet object directly. Because the renderer does not know what is on the page affected by that rule beforehand, it apparently goes on and refreshes these browser objects every time a rule is changed. For this reason, avoid using the fader on styleSheet rules when objects like these are on the page.

Lest you wonder, the setTimeout method of the window object requires an interval value measured in exact milliseconds, but keep in mind that the code itself consumes processor time, so some slight variance in performance and speed from computer to computer is to be expected.

This document is a complete demo. If you are interested in using this script, right-click, select View Source, and Save to disk. You can then cut and paste the parts you need.