CODEWITHSUNDEEP
jquery
Todd Davis
Todd Davis

Reputation: 6033

jQuery Hover image change animation

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.

This works just fine, however the change is abrupt. I'd like to add a slight fadeIn() to the effect so that the color appears to fadein and fadeout. I wrote the following which I thought would work, but doesn't. (The image changes, but there is no fade or delay to the effect). What am I doing wrong?

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

Upvotes: 5

Views: 32734

Answers (7)

piyush prajapati
piyush prajapati

Reputation: 1

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

Upvotes: 0

Steinwolfe
Steinwolfe

Reputation: 81

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

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39872

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();
});​

Upvotes: 9

r_31415
r_31415

Reputation: 8972

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.

Upvotes: 0

mc.
mc.

Reputation: 549

 $(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.

Upvotes: 0

Ranganadh Paramkusam
Ranganadh Paramkusam

Reputation: 4358

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

Upvotes: 0

Jashwant
Jashwant

Reputation: 28995

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

Upvotes: 0

Related Questions