Fade (reduce opacity) image with jQuery only while mouse over

I want to turn the opacity of the image to half when it is hovered (and return it to normal when the cursor is not hovering any more).

I only succeed in making all the images fadeTo, but when the mouse is out the images still faded (and all the images fade. I just one the image under t开发者_如何学编程he cursor to fade).

Any suggestions?

Code:

    /**
     * Opacity animation of blocks
     */
     $j('#content div a').hover(function() {
         $j('#content div a img').fadeTo('slow', 0.5, function() {
});

With the .hover you need to have two functions, one for mouseover, and one for the mouseleave like so.

$j('#content div a img').hover(
    function() {
         $j(this).stop().fadeTo('slow', 0.5);
    },
    function(){
        $j(this).stop().fadeTo('slow', 1);
    }
);

I also added a stop, because otherwise you will get weird flickering when hovering over and out multiple times.

Example http://jsfiddle.net/5fJ3H/

1st thing is that you should use search inside the hovered a, so you should use the this as the start and then use the find^docs method to look under it.

2nd thing is that you need a second handler for hover^docs so you reset the opacity to 1 one hover out..

$j('#content div a').hover(
   function() {
         $j(this).find('img').fadeTo('slow', 0.5);
  },
   function() {
         $j(this).find('img').fadeTo('slow', 1);
  }
);