Internet Explorer 动画修复

Question

您好，我在此页面上使用悬停动画：http://bit.ly/xtvgSq

您可以看到它在 Chrome 和 Firefox 上正常工作，使用 CSS3 过渡。

在 IE 上，我使用此代码来使用 Jquery 不透明度衰减来复制效果。但是，当我将鼠标悬停在每个面板中的标题上时，褪色消失了。即使我将鼠标悬停在项目的标题上，我也希望它保持淡入淡出，就像它在 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。在最初发布的代码中，选择器仅针对图像，这是锚点下的子元素，不包含文本。