Javascript Color Fader

For convenience, I converted all of the colors to hex. Here's how I did it:

   

function getElementHexColor(elementId)

{

    var colorBlock = document.getElementById(elementId);

    var color;

    if(colorBlock.currentStyle)

    {

        color = colorBlock.currentStyle.color;

    }

    if(document.defaultView)

    {

        color = document.defaultView.getComputedStyle(colorBlock, '').getPropertyValue("color");

    }

    if(color.indexOf("#") != -1)

    {

        return (color);

    }

    else if (color.indexOf("rgb") != -1)

    {

        var red = getRgbComponent(color,0);

        var green = getRgbComponent(color, 1);

        var blue = getRgbComponent(color, 2);

        return "#" + red.toString(16) + green.toString(16) +  blue.toString(16);

    }

    else

    {

        alert("Invalid color: please enter a valid hex or rgb color.");

    }

}

function splitRgb(Color)

{

    Color = Color.split("(")[1];

    Color = Color.substring(0, Color.length -1);

    Color = Color.split(",");

    return Color;

}

function getRgbComponent(Color, Component)

{

    Color = splitRgb(Color);

    Color = parseInt(parseFloat(Color[Component]) * .06);

    return Color;

}

After getting the current hex color, I break the hex color into individual red, green and blue components, and then find the difference between the current color and the end color, like this:

function getComponentDiff(startColor, endColor, component)

{

    var start = getHexComponent(startColor, component);

    var end = getHexComponent(endColor, component);

    return end - start;

}



function getHexComponent(color, component)

{

    var Length = color.length;

    switch(Length)

    {

        case 4:

        {

            color = parseInt(color.substring(component + 1, component + 2), 16);

            break; 

        }

        case 7:

        {

            color = parseInt(color.substring((component * 2) + 1, (component * 2) + 2), 16); 

            break;

        }

        default:

        {

            alert("Invalid color: please enter a valid hex or rgb color.");

            break;

        }

    }

    return color;

}

I call these two functions three times, once for red, once for blue, and once for green. This gives me the difference between the current color's red, blue, and green, and the end color's red, blue and green.

Now that I've divided the colors into three components and found differences between the current color's components and the end color's components, I have to create a transition color. For each component, I look at the difference between the current color and the end color. If the difference is greater than zero, I add one to the current component. If the difference is zero, I do nothing to the current component. If the difference is less than zero, I subtract one from the current component. I do this for all three components, and then build a hex color based on the new settings for the components, like this:

    var Color = "#";

    for(i = 0; i < 3; i ++)

    {

        var diff = getComponentDiff(startColor, endColor, i);

        if(diff > 0)

        {

            var NewComponent = getHexComponent(startColor, i) + 1;

            Color += NewComponent.toString(16);

        }

        if(diff == 0)

        {

            var Component = getHexComponent(startColor, i);

            Color += Component.toString(16);

        }

        if(diff < 0)

        {

            var NewComponent = getHexComponent(startColor, i) - 1;

            Color += NewComponent.toString(16);

        }

    }

During this process of building the new color, I check to see if the new color is any different from the old color. If it is, then I call the function that fades the color recursively using a timer. Here is the final fade function:

function fadeColor(elementId, endColor, stepTime)

{

    var startColor = getElementHexColor(elementId);

    var doCallback = false;

    var Color = "#";

    for(i = 0; i < 3; i ++)

    {

        var diff = getComponentDiff(startColor, endColor, i);

        if(!doCallback)

        {

            doCallback = (diff != 0);

        }

        if(diff > 0)

        {

            var NewComponent = getHexComponent(startColor, i) + 1;

            Color += NewComponent.toString(16);

        }

        if(diff == 0)

        {

            var Component = getHexComponent(startColor, i);

            Color += Component.toString(16);

        }

        if(diff < 0)

        {

            var NewComponent = getHexComponent(startColor, i) - 1;

            Color += NewComponent.toString(16);

        }

    }

    document.getElementById(elementId).style.color = Color;

    if(doCallback)

    {

        setTimeout("fadeColor('" + elementId + "', '" + endColor + "', " + stepTime + ")", stepTime); 

    }

}

That's all there is to it. The arguments for the fadeColor method are:

• elementId--the id of the element that you want to fade.


• endColor--the color that you want the element to be when the fade finishes. This has to be a valid HTML hex color, eg. "#00F700"


• stepTime--the amount of time that you want to pass between each step in the fade process. This is in milliseconds.

Download Javascript Code