不透明圖像懸停與jQuery

Question

任何想法，爲什麼這不工作？

我想在側欄中的圖像懸停時會去不透明。

//Opaque image hover 
     $('#sidebar ul li img').hover(function() { 
      $(this).animate({opacity: 0.8}, 500); 
     }, function() { 
      $(this).animate({opacity: 1}, 500); 
     }); 

<div id="sidebar"><!--Sidebar start--> 
     <ul> 
      <li><img src="images/darkroom.png" alt="Darkroom software" class="png"/></li> 
      <li><a href="#"><img src="images/download.png" alt="Download" /></a></li> 
      <li><a href="#"><img src="images/features.png" alt="Features"/></a></li> 
      <li><a href="#"><img src="images/prices.png" alt="Prices"/></a></li> 
      <li><a href="#"><img src="images/support.png" alt="support"/></a></li> 
     </ul> 
</div> 

謝謝

Answer 1

正如約翰·博克指出，懸停（）有兩個功能。

而且，你有你的生命的呼喚一個額外的逗號。我有一種感覺會影響IE。

此：

$(this).animate({opacity: 0.8,}, 500); 

應該是：

$(this).animate({opacity: 0.8}, 500); 

編輯：添加了完整的準備（）實現。

$(document).ready(function() { 
    $('#sidebar ul li img').hover(function() { 
     $(this).animate({opacity: 0.8}, 500); 
    }, function() { 
     $(this).animate({opacity: 1}, 500); 
    }); 
}); 

Answer 2

哈弗通常需要兩個參數，第一個是的mouseenter，第二個是鼠標離開，嘗試：

$('#sidebar ul li img').hover(function() { 
    $(this).animate({opacity: 0.8}, 500); 
}, function() { 
    $(this).animate({opacity: 0.2}, 500); 
}); 

這假定原來的不透明度。2，將其設置到什麼你要。