jQuery Hover image change animation

Question

I have an IMG tag with a grayscale image. I hooked up a Hover() event in order to change the \"src\" to a color image on hover, and back to grayscale on mouse-out.

Answer 1

Much better solution:

Forget about javascript to do this job. Use CSS's sprites instead. If you insist on having fadeIn, fadeOut, use transitions.

UPDATE: Responding to the comments below, I can't write some code since there is no way I can anticipate dimensions and positions in Todd's sprite. I also want to clarify that my suggestion is to use sprites and then transitions to enhance "functionality" and not only transitions because I assume he needs this to work in IE8 and IE9.