Question

我意识到这是一个很好的领域，但我无法在SO或其他地方获得任何推荐的解决方案。

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

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

css background-color，没有background-color（对于div）
删除过滤器的各种方法（请参阅下面的代码中的注释）
确保我的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;
        }

非常感谢任何指导！

Answer 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]-->

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

1 个答案: