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> 

두 번째하는 MouseLeave입니다

Answer 1

John Boker가 지적했듯이 hover()에는 두 가지 기능이 있습니다.

또한 애니메이트 통화에 쉼표가 추가되었습니다. 나는 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); 
}); 

이 원래의 불투명도가 0.2이라고, 당신이 그것을 설정에서 가정 네가 원해.