Internet Explorer的動畫修復

Question

嗨，我使用懸停動畫此頁上：http://bit.ly/xtvgSq

你可以看到它在Chrome和Firefox正常工作，使用CSS3過渡。

在IE上我使用這段代碼來使用Jquery opacity fading來複制效果。但是，當我將鼠標懸停在每個面板的標題上時，淡入淡出。即使當我將鼠標懸停在項目標題上時，我也希望它保持淡入淡出狀態，與Chrome和Firefox中的方式相同。我怎樣才能做到這一點？

下面是我使用的jQuery代碼：

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('.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); 
}); 

你需要稍微修改您的HTML，以及：

<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。在最初發布的代碼中，選擇器僅針對圖像，該圖像是不包含文本的錨點下的子元素。