Color animation plugin for jQuery

Edit · Jan 16, 2012 · 3 minutes read · JavaScript jQuery

Hi! I haven’t wrote since a long time but there’s so much code and so little time…It’s bad that the biggest part of the code is not open source but what can we do…Last few hours I developed a JavaScript plugin for color animation. Of course for few hours I cant make something with great quality so it’s a little bit unstable (I think) but it works and it’s also valid for the JSLint standards. It uses easy algorithm. I think of the RGB color representation as a three dimensional space with coordinates in the range [0, 255]. The user is sets object with specific color (doesn’t matter background, font…btw that’s still not fully tested) which is actually a point in this three dimensional space. The target is another point in the 3D space so I just move from the first to the second point. I spoke enough. Let’s look at the code:

(function ($) {
    'use strict';
    $.fn.colorAnimation = function (userOptions) {

        var element = this,
            options = {
                property: 'background-color',
                color: '#00ff00',
                interval: 300
            },
            sysVars = {
                rgbColor: {},
                rgbTargetColor: {},
                timeout: null,
                currentInterval: 0,
                animationStep: 10
            };

        $.extend(options, userOptions);

        function getFromHex(hex) {
            var rgb = {};
            if (hex.indexOf('#') >= 0) {
                hex = hex.substr(1, hex.length - 1);
            }
            if (hex.length === 3) {
                hex += hex;
            }
            rgb.red = { value: parseInt(hex.substr(0, 2), 16) };
            rgb.green = { value: parseInt(hex.substr(2, 2), 16) };
            rgb.blue = { value: parseInt(hex.substr(4, 2), 16) };
            return rgb;
        }

        function getFromRGB(rgb) {
            var returnValue = {};
            if (rgb.indexOf('rgba(') >= 0) {
                rgb = rgb.replace('rgba(', '');
            } else {
                rgb = rgb.replace('rgb(', '');
            }
            rgb = rgb.replace(')', '').replace(/ /g, '').split(',');
            returnValue.red = { value: parseInt(rgb[0], 10) };
            returnValue.green = { value: parseInt(rgb[1], 10) };
            returnValue.blue = { value: parseInt(rgb[2], 10) };
            return returnValue;
        }

        function getColor(color) {
            var rgb = {};
            if (color.indexOf('#') >= 0) {
                return getFromHex(color);
            } else {
                return getFromRGB(color);
            }
        }

        function getHex(dec) {
            var hex = Math.round(dec).toString(16);
            if (hex.length < 2) {
                hex = '0' + hex;
            }
            return hex;
        }

        function getHexColor(rgb) {
            var red = getHex(rgb.red.value),
                green = getHex(rgb.green.value),
                blue = getHex(rgb.blue.value);
            return '#' + red + green + blue;
        }

        function getSteps() {
            var interval = options.interval,
                rgb = sysVars.rgbColor,
                rgbTarget = sysVars.rgbTargetColor;
            rgb.red.step = 10 * (rgbTarget.red.value - rgb.red.value) / interval;
            rgb.green.step = 10 * (rgbTarget.green.value - rgb.green.value) / interval;
            rgb.blue.step = 10 * (rgbTarget.blue.value - rgb.blue.value) / interval;
        }

        function startAnimation(element) {
            var rgb = sysVars.rgbColor;
            sysVars.timeout = setTimeout(function () {
                if (sysVars.currentInterval >= options.interval) {
                    clearTimeout(sysVars.timeout);
                    return;
                }
                sysVars.currentInterval += sysVars.animationStep;
                rgb.red.value += rgb.red.step;
                rgb.green.value += rgb.green.step;
                rgb.blue.value += rgb.blue.step;
                element.css(options.property, getHexColor(rgb));
                startAnimation(element);
            }, sysVars.animationStep);
        }

        return (function (userOptions) {
            $.extend(options, userOptions);
            sysVars.rgbTargetColor = getColor(options.color);
            sysVars.rgbColor = getColor(element.css(options.property));
            getSteps();
            startAnimation(element);
        }());
    };
}(jQuery));

The whole project you can see in my github repository: GitHub