인터넷 익스플로러 애니메이션 내가이 페이지에 가져가 애니메이션에 사용하고

Question

안녕 수정 :

http://bit.ly/xtvgSq 당신은 그것을 CSS3 전환을 사용하여, 크롬과 파이어 폭스에서 제대로 작동 볼 수 있습니다.

IE에서는이 코드를 사용하여 Jquery 불투명도를 사용하여 효과를 복제합니다. 그러나 각 패널에서 제목 위에 마우스를 가져 가면 사라집니다. Chrome 및 Firefox에서 작동하는 것과 같은 방식으로 프로젝트 제목에 마우스를 올려 놓더라도 페이드를 유지하고 싶습니다. 어떻게해야합니까?

if(jQuery('body').hasClass('ie8') || jQuery('body').hasClass('ie7') || jQuery('body').hasClass('ie9')) { 
var projectImages = jQuery('.project-panel-overlay').siblings('img'); 

projectImages.hover(
function() { 
    jQuery(this).animate({ 
    opacity: .4 
    }, 300); 
}, 
function() { 
    jQuery(this).animate({ 
    opacity: 1 
    }, 300); 
} 
); 

}

Answer 1

이 (예 : http://jsfiddle.net/FNNtT/5/) :보십시오 :

여기 내가 사용하고있어 jQuery 코드의 당신은뿐만 아니라 약간의 HTML을 수정해야

jQuery('.hitbox').live('mouseenter',function(){ 
    jQuery(this).children('img').animate({ 
    opacity: .4 
    }, 300); 
}); 

jQuery('.hitbox').live('mouseleave',function(){ 
    jQuery(this).children('img').animate({ 
    opacity: 1 
    }, 300); 
}); 

를 :

<div class="project-panel"> 
        <a class="hitbox" href=http://jpgalea.com/eco/projects/kangaroo-ground/> 
        <div class="project-panel-overlay"> 
         <div class="project-panel-intro"> 
          <p class="name">Kangaroo Ground</p> 
          <p class="year">2011/2012</p> 
         </div> 
        </div> 

        <img width="235" height="446" src="http://jpgalea.com/eco/wp-content/uploads/2012/01/featured41.jpg" class="attachment-featured-image-project wp-post-image" alt="" title="" />     </a> 
       </div> 

앵커에 "hitbox"라는 클래스가 있음을 알 수 있습니다.

이제 img가 아닌 전체 섹션을 대상으로합니다. 원래 게시 된 코드에서 선택기는 텍스트를 포함하지 않는 앵커 아래의 하위 요소 인 이미지를 대상으로했습니다.