호버상의 불투명도의 애니메이션 변경이 Internet Explorer에서 작동하지 않습니다.

Question

슬라이더 안의 모든 항목의 불투명도를 변경하고 싶습니다. 그것은 크롬에서 완벽하게 작동하지만 Internet Explorer에서 조금 작동하지 않는 두 팔과 여기에

7. HTML 코드입니다 :

 <div id="carousel-image-and-text" class="touchcarousel carousel-image-and-text clearfix" style="overflow: visible; "> 
      <div class="touchcarousel-wrapper grab-cursor"> 
       <ul id="weekly-promos" class="touchcarousel-container" style="width: 1420px; left: 0px; "> 
        <asp:Repeater ID="RList" runat="server"> 
         <ItemTemplate> 
          <li class="touchcarousel-item"> 
           <a class="item-block" href="Article.aspx?PageID=<%# Eval("PageID") %>" rel="tooltip-<%# Eval("PageID") %>"> 
           <figure><img src="<%# SetConf(Eval("PageID").ToString(),false) %><%# Eval("VisualSource") %>"></figure> 
           </a> 
          </li> 
         </ItemTemplate> 
        </asp:Repeater> 
       </ul> 
      </div> 

여기에 자바 스크립트 일부입니다

$(".carousel-slider a img").hover(function() { 
      $(".carousel-slider img").not(this).stop().animate({ opacity: '0.4', filter: 'alpha(opacity=40)' }, 1000); 

     }, function() { 
      $(".carousel-slider img").not(this).stop().animate({ opacity: '1.0', filter: 'alpha(opacity=100)' }, 1000); 
     }); 

Answer 1

할 필터를 사용하지 않고 단지 불투명도 :

$(".carousel-slider a img").hover(function() { 
    $(".carousel-slider img").not(this).stop().animate({ opacity: 0.4 }, 500); 
}, function() { 
    $(".carousel-slider img").not(this).stop().animate({ opacity: 1.0 }, 500); 
});