This task is the crux to the script. There are a few different approaches to this problem.
This section of code is responsible for determining how fast the fade from the old colour to the new colour is. The most obvious way to approach this problem is to have a set number of steps between the two colours so that every fade takes the same amount of time. The other, less obvious, and more difficult, way to implement this step is to dynamically calculate the number of steps between the two colours based upon their values.
For this example, I am going to take the road less travelled, and dynamically calculate the number of steps between the two values. Not only will it make a more interesting example, but the end result will be stronger as well. If a web incorporates a few different fades, and they're all the same length regardless of the initial and final colours, the fade itself has a static feel to it. After the initial 'wow' factor wears off, that static feel to the fade becomes noticiable, and the fade doesn't 'blend in' to the overall web.
Having decided on dynamically calculating the fade, the next issue to be addressed is how to calculate the fade. Every colour that appears on your monitor is made up of a mixture of red, green and blue pixels. For example, a purple colour might have a red value of 200, a green value of 10 and a blue value of 200. A yellowish colour, on the other hand, might have a red value of 250, a green value of 210, and a blue value of 0. To move from the purple to the yellow, you would have to add 50 to the red value, add 200 to the green value, and subtract 200 from the blue value.
The distance between each value is 50 for red, 200 for blue and 200 for green. To make the transition, you could use the greatest distance (200 steps) as the basis of the total number of steps to travel. For each step, the red value would increase by one fourth of a step, the green value would increase by 1 step, and the blue would decrease by one step.
Slightly more difficult to implement would be a system that used the least greatest amount as the basis for the total number of steps. In the previous example, the least greatest amount is 50. For each step, the red value would increase by 1, the green value would increase by 4 and the blue value would decrease by 4.
This example is going to use the latter method of calculating the fade time. JavaScripts that fade the background can add some pizzaz to a web page, but they can easily sidetrack the primary purpose of a web page -- to convey information. To avoid this, the fades themselves should be coded to be as unobtrusive as possible.
What makes this approach more difficult to implement is that in some situations, the minimum fade amount is going to be zero, and the code will have to chose the next lowest amount. Although the code takes a little more time to plan and write, the result is worth it. So, the first subdivision of the task is to calculate the differences between the old and new colour. The next subtask is to find the minimum difference that is greater than zero. From there, it is possible to calculate the total number of steps for the fade, as well as each colour's relative increments.