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

Where are you fading out ? Fade in does display:block with opacity changing from 0 to 100. Fade out does display:none with opacity changing from 100 to 0.

Once, you fadeIn, image is display:block and opacity is 100. So, you dont see an animation. So, either do a display:none or fadeOut before fadeIn again.

Given is example with explains things. You should change it according to your requirements.

$("#showForm").hover(
              function () {
                $(this).fadeOut('fast').fadeIn('slow', function(){
                    $(this).attr("src", 'images/AddButtonSmall.gif');
                });
              }, 
              function () {
                $(this).fadeOut('fast').fadeIn('slow', function(){
                    $(this).attr("src", 'images/AddButtonSmallGray.gif');
                });
              }
            );