Animate Colour Change transitions

Whenever with css or anything we change colors like backgrounds, color, border color etc. Is there a way we can animate the transition between normal and hover state colors?

What I want to say is the colors, lets say change instantly from white t开发者_如何学运维o black. I want the transition stages like all the gray-scale in between white and black. With colors this can be attained by fade effect if one colors fades into another. The in between colors are covered up.

Is there a way to achieve this?

This can be done with CSS3, although it's not completely cross-browser as of yet. http://www.the-art-of-web.com/css/css-animation/

a { 
    -webkit-transition: all 1s ease-in-out; // control the animation time via '1s'
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    color:#ff0000;
}

a:hover { color:#00ff00 }

Alternatively you could use jQuery .animate(); http://api.jquery.com/animate/

        $("#yourdiv").css({
            backgroundColor: #000000 // Original Background color
        }).hover(function() {
            $(this).stop().animate({
                backgroundColor: #ff0000 // Hover State Background color
            }, 350); // animation time
        }, function() {
            $(this).stop().animate({
                backgroundColor: #000000 // Hover out ( back to original )
            }, 350); // animation time
        });

Sounds like a job for jQuery - specifically, for the animate() method:

http://api.jquery.com/animate/

is it possible? yes

how is it possible? javascript

X3Maverick has a good answer (out of up-votes, sorry), but you could also try making a timer to adjust the colors accordingly

var interval = 500,
  iteration = 0,
  maxIterations = 10;

setTimeout(doUpdate, interval);

function doUpdate()
{
  //color logic here 'rgb( R, G, B)' or #GHIJKL
  switch (interval)
  {
    case 0:
    ...
  }
  if (iteration < maxIterations) setTimeout(doUpdate, interval);
}

this would allow you to specify exactly what colors you want and in what order. Please only use your powers for good or for awesome. Flashing colors and blinking text cause seizures and are not appreciated.

jQuery now has an official color animation plugin:
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

You can't directly animate color using jQuery since "color" is not a numeric CSS property.

But you can do something like this: Let element A be styled to reflect the non-hover state, and let element B be styled to reflect the hover state except with opacity set to 0. Then absolutely position element B directly over element A. Then use the jQuery fadeIn() and fadeOut() methods to change the opacity of element B on hover.