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;
}

如果你想要缓慢的过渡，你可以看看here自定义效果。