jQuery - уменьшить непрозрачность изображения при наведении курсора

Question

Я хочу добиться того, чтобы при наведении курсора мыши на изображение его непрозрачность уменьшалась до половины. Я, должно быть, здесь делаю очевидную ошибку, но не могу понять, что именно. Любой совет будет оценен.

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

Лучше было бы сделать это простым CSS, без добавления какого-либо JavaScript, так что вы можете просто добавить класс и сделать это со всеми вашими изображениями, что-то вроде:

.arrow:hover {
  opacity: 0.5;
}

и если вы хотите медленный переход, вы можете просто посмотреть здесь, чтобы настроить эффект.

Answer 2

Я обновил ваш jsfiddle - http://jsfiddle.net/bUHVc/6/

Вы пропустили включение для JQuery. Кроме того, вам не нужна строка find("img") в вашем коде. Вы можете легко выполнить то, что ищете, используя функцию animate().

JQuery

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

CSS:

.arrow{
   opacity: 0.5;
}

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>

Answer 3

Вы должны включить JQuery. Кроме того, либо удалите .find() и переместите ваше имя класса в элемент img, или используйте .children() вместо.

Обновленная скрипка: http://jsfiddle.net/bUHVc/3/