Непрозрачное изображение, зависающее с 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

Как отметил Джон Бокер, функция hover() выполняет две функции.

Кроме того, у вас есть дополнительная запятая в вашем анимированном звонке. У меня такое чувство, что это повлияет на IE.

Это:

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

Должно быть:

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

EDIT: добавлена ​​полная реализация готовой().

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

Answer 2

Hover обычно принимает два параметра, первый является MouseEnter, второй является MouseLeave, попробуйте:

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

это предполагает, что первоначальное помутнение было 0,2, то установить его на то, что вы хотите.