Have you ever tried to animate the color of an elements background, border or text in jQuery and it doesn't work? For some reason jQuery has not implemented native color animations. That said, John Resig himself made a color plugin long ago that enables color animations in jQuery. Using this plugin we are now able to transition color animations. A great example of color animation can be found on David DeSandro's Metafizzy website.

If you haven't noticed already, this page is using the color plugin along with a little snippet I wrote below to loop through an array of pre-defined colors and animate the body background. You can use this same technic or modify the script to suit your own needs and get a very "Metafizzy" effect going on. Check it:

jQuery(function($){
    var colors = ['c74d28','c78d28','b6c728','28c758','28a0c7','3728c7','8d28c7','c728a3','c7283e','386c99','82b52a'];
    animateColor(0);

    function animateColor(x){
        $("body").animate({"backgroundColor":"#"+colors[x],"color":"#"+colors[x]}, 10000, function(){
            if(x >= colors.length){
                x = 0;
            } else {
                x++;
            }
            animateColor(x);
        });
    }
});