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

Question

我意识到这是一个受到良好践踏的领土，但我无法获得SO或其他地方的任何推荐解决方案。

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

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

• CSS背景色和无背景颜色（股利）
• 去除过滤器的各种方式（请参阅下面的代码中的注释）
• 确保我的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") 
      }); 
     }); 
    }); 

这里的日e 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]-->