Jquery fadeOut on hover

Question

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

http://jsfiddle.net/PPpnT/25/

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!

Answer 1

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.