jQuery fadeIn在IE7中留下没有消除锯齿的文本

Question

为什么会这样？任何解决方法？

jQuery的:

$(function() {
   $('p.quote').fadeIn(3000);
});

HTML:

<p>someone said:</p>
<p class="quote">&ldquo;lorem ipsum&rdquo;</p>
<p>someone else said:</p>
<p class="quote" style="display: none;">&ldquo;magna carta&rdquo;</p>

Answer 1

IE和fadeIn/fadeOut函数存在一个已知错误及其对文本元素的影响.看看这里的信息:

http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

看起来我的原始链接已经死了.使用评论中的其他解决方案进行了更新:

http://malsup.com/jquery/cycle/cleartype.html

解决方法是在fadeIn()完成后删除回调函数中元素的"filter"属性.

Answer 2

我在http://jquery.malsup.com/fadetest.html找到了更好,更通用的解决方案.

我已经把它改编成一个独立的JavaScript文件,包含在使用jQuery fade*()方法的页面中.

//
//  jQuery IE Fade Fix
//
//  Adapted from code found at http://jquery.malsup.com/fadetest.html.
//
//  This is only needed for IE 7 and earlier, so this is best added to your page using IE's conditional comments
//  (http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx) as follows:
//      <!--[if lt IE 8]><script type="text/javascript" src="jquery-ie-fade-fix.js"></script><![endif]-->
//
(function($) {
    $.fn.fadeIn = function(speed, callback) {
        if ($.isFunction(speed) && callback == undefined) {
            callback = speed;
            speed = 'normal';
        }
        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) {
        if ($.isFunction(speed) && callback == undefined) {
            callback = speed;
            speed = 'normal';
        }
        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) {
        if ($.isFunction(speed) && callback == undefined) {
            callback = speed;
            speed = 'normal';
        }
        return this.animate({opacity: to}, speed, function() {
            if ( to == 1 && $.browser.msie )
            {
                this.style.removeAttribute('filter');
            }
            if ( $.isFunction(callback) )
                {
                callback.call(this);
            }
        });
    };
})(jQuery);

编辑:合并了joeformd对回调的修复.

EDIT2:为未定义速度但回调为-Tomi的极端情况添加了修复程序

Answer 3

根据我的记忆,设置的filter属性会导致这种情况.完成fadeIn后,从元素中删除filter属性.

$('p.quote').fadeIn(2000, removeFilter);

function removeFilter() {
  $('p.quote').removeAttr("filter");
}