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來自定義效果。

Answer 2

您需要包括jQuery的。此外，要麼刪除.find()並將您的類名移至img元素，要麼改爲使用.children()。

更新小提琴：http://jsfiddle.net/bUHVc/3/

Answer 3

我已經更新您的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>