JQuery的切換功能在IE渲染奇怪的文字（失去的ClearType？）

Question

我有這個腳本切換觸點形式單擊按鈕時：在Firefox

$(document).ready(function(){ 

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

}); 

一切都工作正常，但在IE中似乎切換的淡入效果不能100％完成，並且文本在完整呈現之前的某個地方被「凍結」，從而失去了所有高分辨率。

我看過這個topic但我不知道如何將它應用於我的問題。

感謝您的任何幫助。

Answer 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); 

Answer 2

對於保羅，加入到接受答案的解決方案，創建一個切換功能很簡單。

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