Fade between photos and text

Question

I wrote this piece of code to fade between two pictures. A short description is also provided below, and I want the text to change color and also the image to disappear in the second when the mouse “rolls over” the field.

Unfortunately, I have a problem with changing the color of the text, and the image disappears if the mouse is on the box, the text changes color, but the rice does not disappear in the second.

This is what I use for pic fade:

$("img.grey").hover( function() { $(this).stop().animate({"opacity": "0"}, "slow"); }, function() { $(this).stop().animate({"opacity": "1"}, "slow"); }); 

Any clues?

Here is the fiddle: http://jsfiddle.net/IronFeast/BGKFN/26/

Answer 1

Make a change to the image when you hover over the link, not the image:

 $(".box a").hover( function() { $(this).find("img.grey").stop().animate({"opacity": "0"}, "slow"); }, function() { $(this).find("img.grey").stop().animate({"opacity": "1"}, "slow"); }); 

http://jsfiddle.net/BGKFN/28/

Edit
Or simply: http://jsfiddle.net/BGKFN/30/

 $(".box a").hover(function( e ) { $(this).find("img.grey").stop().animate({opacity: e.type=="mouseenter"?0:1}, 800); }); 

where jQuery hover is short for mouseenter mouseleave , which means that if we target the current event e , we get one of two, and using the ternary operator ( ? : ) , which we set the opacity to 0 if true (is mouseenter) and 1 if false (if mouseleave).