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

Try with this

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

Here's Fiddle

Answer 2

 $(this).fadeIn('slow', 

is actually trying to fade in the this element, slowly, and 'this' refers to

$("#showForm")

Instead if you want you could put the color image directly over the current grayscale image, and mark the color image hidden, then have it slowly fade in. Assuming they are positioned on top of one another you could do:

$("#showForm").hover(
    function () {
       $("#colorImageID").fadeIn();
    }, 
    function () {
       $("#colorImageID").fadeOut();
    });
  }

);

assuming the html is something like (where sameAbsolutePosition is css to put them in the same exact spot, so maybe something like position:absolute; left:20; top:20px;):

<img src='images/AddButtonSmallGray.gif' class="sameAbsolutePosition">
<img src='images/AddButtonSmall.gif' style="display:none;" class="sameAbsolutePosition">

To reiterate, you'll be fading a new image on top of another image. You could also fade the grayscale image out simultaneously.

Answer 3

Here are a couple solutions. Your code doesn't work because you are setting the source which changes the image immediately. It's probably easier just to load both images, overlay them with CSS and then fade the color one in out when the parent container is moused over. Alternatively you could cross fade them

css

.fader { display: inline-block; }
.fader img:last-child {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}​

html

<div class="fader">
    <img src="http://placehold.it/300x300/000fff" />
    <img src="http://placehold.it/300x300/fff000" />
</div>​

fade in on mouseover

http://jsfiddle.net/Xm2Be/3/

$('.fader').hover(function() {
    $(this).find("img:last").fadeToggle();
});​

cross fade

http://jsfiddle.net/Xm2Be/2/

$('.fader').hover(function() {
    $(this).find("img").fadeToggle();
});​

Answer 4

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.

Answer 5

Try with this

         $(".image_hover").mouseover(function(){
        var old_src=$(this).attr("src");
        var new_src=$(this).attr("data-alt-src");
        $(this).attr('src', new_src);
        $(this).attr('data-alt-src', old_src);
      });
     $(".image_hover").mouseout(function(){
        var old_src=$(this).attr("src");
        var new_src=$(this).attr("data-alt-src");
        $(this).attr('src', new_src);
        $(this).attr('data-alt-src', old_src);
      });

Answer 6

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');
}