Jquery fadeOut on hover

Question

I need a bit of help with jquery to get a fadeOut effect happening, here is my code:

When you hover over the image the image needs to fade out and show the red underneath, when you mouse off the image should fade back. I think the code may need a stop function - just having a hard time writing it.

All suggestions welcome!

jfriend00 · Accepted Answer · 2012-02-29T01:58:03.767

In your specific jsFiddle, use this:

$('#show').hover(function() {
    $(this).stop(true).fadeTo("slow", 0);
}, function() {
    $(this).stop(true).fadeTo("slow", 1);
});

You can see it work here: http://jsfiddle.net/jfriend00/BJwn7/.

They key here is you can't use .fadeOut() and .fadeIn() because when they are done, they set display: none which causes the element to be hidden and that messes up the .hover() function. So, instead just fade the opacity to 0 (but the hover stays in effect) and then when the hover leaves, fade back to opacity of 1.

I also had to remove the opacity CSS for the red block from your jsFiddle because you want it to be visible when you fade out the image so you can just leave it visible behind the image.

If you only wanted the effect in browser that support CSS3 transitions (no version of IE yet), then you could also do this without jQuery/javascript and just use CSS3 transitions. But for something as simple as this, when you already have jQuery, it's pretty easy to just use jQuery fades and get cross browser support.

@JordyVialoux - I tweaked it a bit by adding the `.stop(true)` so it behaves a little better if you go in/out quickly. — jfriend00, Feb 29 '12 at 01:58

score 1 · Answer 2 · answered Feb 29 '12 at 01:42

1

$('#show').hover(
  function () {
    $(this).fadeOut("slow");
  }, 
  function () {
    $(this).fadeIn("slow");
  }
);

answered Feb 29 '12 at 01:42

msonsona

1,306
14
20

Close but it needs to fade out when you hover - try using the jsfiddle link above if that helps. – Filth Feb 29 '12 at 01:50
Did you actually try this in their jsFiddle? I don't think it works because `.fadeOut()` hides the object when done which messes up the `.hover()`. – jfriend00 Feb 29 '12 at 01:56

score 0 · Answer 3 · edited May 23 '17 at 12:17

0

You started with CSS transitions, so here's an example that uses this:

http://jsfiddle.net/PPpnT/33/

I use Firefox, so the example was updated for Firefox only, but the others should be symmetrical.

Read more about this here:

http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

Credits:

CSS Webkit Transition - Fade out slowly than Fade in

edited May 23 '17 at 12:17

Community

1
1

answered Feb 29 '12 at 01:48

icyrock.com

27,952
4
66
85

Sure thing - unfortunately IE doesn't seem to support this yet: http://stackoverflow.com/questions/5103283/does-internet-explorer-support-css-transitions – icyrock.com Feb 29 '12 at 01:51

score 0 · Answer 4 · answered Feb 29 '12 at 01:52

Examples with fadeOut will NOT work with your html code. The reason is simple - mouseout or second function of the hover will be triggered at the end of the fadeOut animation as the image will get display:none property. Look at my code http://jsfiddle.net/TW232/

$('div').hover(function(){
    $(this).width($('img', this).width()).height($('img', this).height());
    $('img', this).stop(true,true).fadeOut('fast');
    }, function(){
    $('img', this).stop(true,true).fadeIn('fast');
});

html:

<div>
 <img id="show" src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt=""/>
</div>

and css:

div {background:red; width:0px;}

Jquery fadeOut on hover

4 Answers4

Linked