JQuery 切换函数在 IE 中呈现奇怪的文本（丢失 ClearType？）答案

【问题标题】：JQuery toggle function rendering weird text in IE (losing ClearType?)JQuery 切换函数在 IE 中呈现奇怪的文本（丢失 ClearType？）
【发布时间】：2010-10-02 06:10:46
【问题描述】：

我有这个小脚本可以在单击按钮时切换联系表单：

$(document).ready(function(){

    $("#button").click(function () {
      $("#form").toggle("slow");
    });

});

在 Firefox 中一切正常，但在 IE 中，切换的淡入效果似乎没有 100% 完成，并且文本在完成渲染之前被“冻结”，失去了所有精细分辨率。

我阅读了此topic，但我不知道如何将其应用于我的问题。

感谢您的帮助。

【问题讨论】：

当我进行简单的 $('#tagID').show() 调用时也会发生这种情况。

标签： jquery internet-explorer toggle cleartype

【解决方案1】：

这可能是您正在寻找的。此外，还有一个functional demo of another similar method 在线可用。：

//-------------------------------------------------------------------------------------------------------
// ClearTypeFadeTo / ClearTypeFadeIn / ClearTypeFadeOut
//
// Custom fade in and fade out functions for jQuery that will work around
// IE's bug with bold text in elements that have opacity filters set when
// also using Window's ClearType text rendering.
//
// New Parameter:
// bgColor    The color to set the background if none specified in the CSS (default is '#fff')
//
// Examples:
// $('div').ClearTypeFadeIn({ speed: 1500 });
// $('div').ClearTypeFadeIn({ speed: 1500, bgColor: '#ff6666', callback: myCallback });
// $('div').ClearTypeFadeOut({ speed: 1500, callback: function() { alert('Fade Out complete') } });
//
// Notes on the interaction of ClearType with DXTransforms in IE7
// http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
(function($) {
    $.fn.ClearTypeFadeTo = function(options) {
        if (options)
            $(this)
                .show()
                .each(function() {
                    if (jQuery.browser.msie) {
                        // Save the original background color
                        $(this).attr('oBgColor', $(this).css('background-color'));
                        // Set the bgColor so that bold text renders correctly (bug with IE/ClearType/bold text)
                        $(this).css({ 'background-color': (options.bgColor ? options.bgColor : '#fff') })
                    }
                })
                .fadeTo(options.speed, options.opacity, function() {
                    if (jQuery.browser.msie) {
                        // ClearType can only be turned back on if this is a full fade in or
                        // fade out. Partial opacity will still have the problem because the
                        // filter style must remain. So, in the latter case, we will leave the
                        // background color and 'filter' style in place.
                        if (options.opacity == 0 || options.opacity == 1) {
                            // Reset the background color if we saved it previously
                            $(this).css({ 'background-color': $(this).attr('oBgColor') }).removeAttr('oBgColor');
                            // Remove the 'filter' style to restore ClearType functionality.
                            $(this).get(0).style.removeAttribute('filter');
                        }
                    }
                    if (options.callback != undefined) options.callback();
                });
    };

    $.fn.ClearTypeFadeIn = function(options) {
        if (options)
            $(this)
                .css({ opacity: 0 })
                .ClearTypeFadeTo({ speed: options.speed, opacity: 1, callback: options.callback });
    };

    $.fn.ClearTypeFadeOut = function(options) {
        if (options)
            $(this)
                .css({ opacity: 1 })
                .ClearTypeFadeTo({ speed: options.speed, opacity: 0, callback: options.callback });
    };
})(jQuery);

【讨论】：

我最终使用了您提供的链接中的解决方案，因为我发现它更容易理解。感谢您的信息。

【解决方案2】：

对于 Paul 来说，添加到接受的答案解决方案中，创建切换功能很简单。

$.fn.ClearTypeToggle = function(options) {
    if ($(this).css('opacity') == 1) {
        $(this).ClearTypeFadeOut(options);
    } else {
        $(this).ClearTypeFadeIn(options);
    }
}

【讨论】：