Background & Foreground Color Fade

A combination of background and foreground color fades. Often using both makes for weird combinations, but allows for one function to do either method if you pass in static parameters for the second.

HTML

<div id="xxxx">I can change colors like a real boy!</div>

JavaScript

$.fn.ColorFade = function(userOptions) {
    // starting text color, ending text color, starting bg color, ending bg color, duration in ms
    var options = $.extend({
        startText: "#ff0000",
        endText: "#000",
        startBG: "#fff79f",
        endBG: "#fff",
        time: 2000
    }, userOptions || {});
    (this).css({
        color: options.startText,
        backgroundColor: options.startBG
    }).animate({
        color: options.endText,
        backgroundColor: options.endBG
    }, options.time);
    return this;
};

$("#xxxx").ColorFade({
    time: 6000
})