Color Fading

Animates the color of text over a small duration.

by BradleyStaples

HTML

<p class="test">I can change colors like a real boy!</p>

CSS

.test {color:#00f; font-weight:bold; font-size:2em;}

JavaScript

$.fn.textColorFade = function(userOptions) {
    // starting color, ending color, duration in ms
    var options = $.extend({
        start: "#ff0000",
        end: "#000",
        time: 2000
    }, userOptions || {});
    $(this).css({
        color: options.start
    }).animate({
        color: options.end
    }, options.time);
    return this;
};

$(".test").textColorFade({
    start: "#eeeeee",
    time: 4000
});