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.

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

You can't fade in a .src change. To fadeIn a new image while the old one fades out, you would mostly like need to use two overlapping images and fade on in and the other out. — jfriend00
– jfriend00, Commented Apr 6, 2012 at 4:45

mrtsherman · Accepted Answer · 2012-04-06 05:51:33Z

9

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

edited Apr 6, 2012 at 5:51

answered Apr 6, 2012 at 4:54

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mrtsherman Over a year ago

@jfriend00 - Thanks, didn't know about fadeToggle!

Leon Gaban Over a year ago

Hi @mrtsherman how would you write your CSS in SASS? :) stackoverflow.com/questions/16905061/…

Jashwant · Accepted Answer · 2012-04-06 04:49:40Z

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

Ranganadh Paramkusam · Accepted Answer · 2012-04-06 04:52:12Z

0

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

answered Apr 6, 2012 at 4:52

Ranganadh Paramkusam

4,3882 gold badges25 silver badges33 bronze badges

Comments

mc. · Accepted Answer · 2012-04-06 04:55:08Z

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

r_31415 · Accepted Answer · 2012-04-06 05:11:04Z

0

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.

edited Apr 6, 2012 at 5:11

answered Apr 6, 2012 at 4:51

r_31415

9,00218 gold badges81 silver badges124 bronze badges

3 Comments

mrtsherman Over a year ago

A site that talks about sprites and not at all about how to do image transitions isn't very helpful. This doesn't answer his question at all.

Greg Pettit Over a year ago

Agree that the sprites comment isn't really related; but you COULD do this with a CSS3 transition; I'd just like to see the code.

Todd Davis Over a year ago

Thank you for this suggestion. I'm not really familiar with using sprites and I'd like to read up on it, so this was a good "prod" to do so. :)

Community · Accepted Answer · 2017-05-23 12:05:14Z

0

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

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Oct 12, 2013 at 20:36

Steinwolfe

811 silver badge4 bronze badges

Comments

piyush prajapati · Accepted Answer · 2018-04-18 12:45:30Z

0

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

answered Apr 18, 2018 at 12:45

piyush prajapati

1

Collectives™ on Stack Overflow

jQuery Hover image change animation

7 Answers 7

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related