IE在JQuery淡入淡出/不透明动画中扭曲文本

Posted 2023-03-06

【中文标题】IE在JQuery淡入淡出/不透明动画中扭曲文本

【英文标题】：IE distorting text in JQuery fade / opacity animation

【发布时间】：2012-02-25 08:51:54

【问题描述】：

我意识到这是一个成熟的领域，但我无法在 SO 或其他工作场所获得任何推荐的解决方案。

我有一个 div，里面有文本，我想在点击时淡出到 25%，然后在后续点击时淡入到 100%。它适用于除 IE 之外的所有浏览器（我正在 IE8 中测试）。问题：在将 div 淡入后，IE 中的文字都是锯齿状且不完整的（我认为正确的术语可能是“不抗锯齿”）。

我已经尝试了所有我能找到的推荐解决方案。最常推荐的似乎是我在下面的示例中包含的一个，它是为不透明度设置动画（而不是使用fadeTo），为IE应用过滤器：alpha（不透明度），然后在回调中删除过滤器一次动画到 100% 已完成。我也尝试过（根据其他建议）：

css 背景色和无背景色（用于 div） 移除过滤器的各种方法（参见下面代码中的 cmets） 确保我的 div 具有高度、宽度和浮动：左

这里是javascript：

    $(document).ready(function()
    $("#fade_button").click(function()
        $('#test_div').animate(
            opacity:0.25,
            500,
            function() 
                $("#test_div").css('filter','alpha(opacity=25)');
            );
        );
    $("#unfade_button").click(function()
        $('#test_div').animate(
            opacity:1.0,
            500,
            function() 
                $("#test_div").css('filter','none'); // tried ('filter','') and document.getElementById("#test_div").style.removeAttribute("filter")
            );
        );
    );

这是css：

        div#test_div
        
        float:left;
        width:1000px;
        height:200px;
        margin-left:50px;
        border:1px solid black;
        background-color:yellow;
        

非常感谢您的指导！

【问题讨论】：

"未消除锯齿" = 别名。

【参考方案1】：

问题是 IE 添加了过滤器属性。我用这个插件来删除它。

(function($) 
  $.fn.fadeIn = function(speed, callback) 
    return this.animate(opacity: 'show', speed, function() 
            if ( $.browser.msie )
            
                    this.style.removeAttribute('filter');
            
            if ( $.isFunction(callback) )
            
                    callback.call(this);
            
    );
  ;

  $.fn.fadeOut = function(speed, callback) 
    return this.animate(opacity: 'hide', speed, function() 
            if ( $.browser.msie )
            
                    this.style.removeAttribute('filter');
            
            if ( $.isFunction(callback) )
            
                    callback.call(this);
            
    );
  ;

  $.fn.fadeTo = function(speed, to, callback) 
    return this.animate(opacity: to, speed, function() 
            if ( to == 1 && $.browser.msie )
            
                    this.style.removeAttribute('filter');
            
            if ( $.isFunction(callback) )
            
                    callback.call(this);
            
    );
  ;
)(jQuery);

然后有条件地添加。

<!--[if IE]><script type="text/javascript" src="jquery-ie-fade-fix.js"></script><![endif]-->

【讨论】：

非常感谢，詹姆斯。我最终在页面上的 js 中的 if($.browser.msie) 条件中使用了 this.style.removeAttribute('filter') （在回调中），它起作用了！