【问题标题】: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'); }); });但它仍然不会褪色
      猜你喜欢
      • 2015-06-02
      • 2011-01-08
      • 2018-01-23
      • 2011-04-04
      • 2012-10-05
      • 2012-04-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多