悬停时IE中的动画不透明度不起作用答案

【问题标题】：animate opacity in IE on hover wont work悬停时IE中的动画不透明度不起作用
【发布时间】：2011-06-12 08:08:16
【问题描述】：

我有一个 PNG 可以帮助阅读悬停时的菜单，但淡入淡出在 IE 上不起作用，它在 Chrome 和 Firefox 中效果很好，我也使用过 PNG-24，而 PNG-8 没有任何效果

$(function() {
      $('#gradient').animate({ "opacity": 0 });

        $('#menu').hover(function() {
            $('#gradient').removeClass('hidden').animate({opacity: '1'}, 400);
        }, function() {
            $('#gradient').animate({filter: '0'}, 400);
        });
    });    </script>

【问题讨论】：

标签： internet-explorer animation hover opacity

【解决方案1】：

IE 至少旧版本在结合 PNG 透明度和 CSS 透明度方面存在严重问题。

我认为这在 IE9 中已修复，但我不确定。

每个都可以正常工作，但不能在同一个图像对象上。

【讨论】：

【解决方案2】：

IE8 及更低版本不支持标准 CSS opacity 属性。

它确实支持另一种不透明度方法，使用 IE 特定的filter 属性，但使用起来比opacity 复杂得多，因为filter 处理各种效果。

但是，既然您使用的是 JQuery，为什么不使用内置的 .fadeIn() 和 .fadeOut() 效果来代替 - 这样，JQuery 会为您完成所有工作，包括解决如何更改它所在的浏览器的不透明度。

见http://api.jquery.com/category/effects/

【讨论】：

我将代码切换到 $(document).ready(function() { $('#menu').hover(function() { $('#gradient').fadeIn('slow '); }, function() { $('#gradient').fadeOut('fast'); }); });但它仍然不会褪色