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

You could do this cross fade with css3 using transition too. Not available for all browsers but still... http://www.w3schools.com/css3/css3_transitions.asp

In similar way to CSS: image link, change on hover

For example:

#showForm
{
    background: transparent url('images/AddButtonSmallGray.gif') center top no-repeat;

    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}

#showForm:hover {
    background-image: url('images/AddButtonSmall.gif');
}