jQuery animate backgroundColor

Question

I am trying to animate a change in backgroundColor using jQuery on mouseover.

I have checked some example and I seem to have it right, it works with other properties

Answer 1

Do it with CSS3-Transitions. Support is great (all modern browsers, even IE). With Compass and SASS this is quickly done:

#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}

Pure CSS:

#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {background:yellow}

I've wrote an german article about this topic: http://www.solife.cc/blog/animation-farben-css3-transition.html