JQuery切换函数在IE中呈现奇怪的文本(丢失ClearType?)

单击按钮时,我有这个小脚本来切换联系表单:

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

一切都在Firefox中运行正常,但在IE中,似乎切换的淡入效果不会100%完成,并且文本在完整渲染之前被某个地方“冻结”,失去了所有精细分辨率。

我读了这个主题,但我不确切知道如何将它应用到我的问题。

谢谢你的帮助。

这可能是你正在寻找的。 此外,还有一个在线提供的另一种类似方法的function演示 :

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

对于Paul,添加到已接受的答案解决方案,创建切换function很简单。

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