Edit in JSFiddle

<div>
    OMG! Click me to make sexy things happen
</div>
$(function() {
    var div = $("div"),
        orig = $.Color(div, "backgroundColor"),
        duration = 2000;

    // returns a callback to print the color


    function printColorCallback(prop) {
        return function() {
            var color = $.Color(div, prop);
            div.append("<p><code>" + prop + ": " + color.toHexString() + " / " + color.toRgbaString() + " / " + color.toHslaString() + "</code></p>");
        }
    }

    div.toggle(function() {
        div.text("Animating text color to hue +=120 lightness -=0.5 of the background");
        div.animate({
            color: orig.hue("+=120").lightness("-=0.5")
        }, duration, printColorCallback("color"));
    }, function() {
        div.text("Animating backgroundColor desaturate");
        div.animate({
            backgroundColor: $.Color({
                saturation: 0
            })
        }, duration, printColorCallback("backgroundColor"));
    }, function() {
        div.text("Animating backgroundColor opacity to 0 (kinda sorta in IE too!)");
        div.animate({
            backgroundColor: $.Color({ alpha: 0 })
        }, duration, printColorCallback("backgroundColor"));
    }, function() {
        div.text("Resetting");
        div.animate({
            color: "black",
            backgroundColor: orig.toRgbaString()
        }, duration, printColorCallback("backgroundColor"));
    });
});
div { 
    background: #abcdef;
    width: 200px;
    height: 130px;
    margin: 0px auto;
    padding: 10px;
}