jQuery - reduce opacity of image on mouseover

Question

What I want to achieve is that when you hover your mouse over an image its opacity will reduce to the half. I must be doing an obvious mistake here but can't figure out what exactly. Any tip would be appreciated.

http://jsfiddle.net/bUHVc/1/

   <a href="#" id="right-button"><img class="arrow" src="http://placekitten.com/200/200" alt="right" /></a>

 $('.arrow').hover(
function() {
     $(this).find('img').fadeTo('slow', 0.5);
},
function() {
     $(this).find('img').fadeTo('slow', 1);
 }
);

Answer 1

A nicer solution would be to do it in simple CSS, without adding any javascript, so you can just add a class and do it with all your images, something like:

.arrow:hover {
  opacity: 0.5;
}

and if you want the slow transition you can just look at here to customize the effect.

Answer 2

You need to include jQuery. Also, either remove the .find() and move your classname to the img element, or use .children() instead.

Updated fiddle: http://jsfiddle.net/bUHVc/3/

Answer 3

I have updated your jsfiddle - http://jsfiddle.net/bUHVc/6/

You were missing the include for jquery. Also, you did not need the find("img") line in your code. You can easily accomplish what you are looking for using the animate() function.

The jQuery

$(".arrow").hover(function(){
   $(this).stop().animate({"opacity": "1"}); 
}, function(){
   $(this).stop().animate({"opacity": "0.5"});
});

The CSS:

.arrow{
   opacity: 0.5;
}

The HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a href="#" id="right-button"><img class="arrow" src="http://placekitten.com/200/200" alt="right" /></a>