本文介绍了JQuery切换函数在IE中呈现奇怪的文本(丢失ClearType?)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
点击按钮时,我有这个小脚本来切换联系表格:
I have this little script to toggle a contact form when a button is clicked :
$(document).ready(function(){
$("#button").click(function () {
$("#form").toggle("slow");
});
});
所有在Firefox中都运行正常,但在IE中,似乎切换的淡入效果并非如此t得到100%完整,文本在完整渲染之前被某个地方冻结,失去了所有精确的分辨率。
All is working OK in Firefox, but in IE it seems like the toggle's fade-in effect doesn't gets 100% complete, and the text is being 'frozen' somewhere before a complete render, loosing all its fine resolution.
我读了这个但我不确切知道如何将其应用于我的问题。
I read this topic but I don't know exactly how to apply it to my issue.
感谢您的帮助。
推荐答案
这可能是您正在寻找的。此外,还有一个可在线获取。:
This may be what you're looking for. Also, there is a functional demo of another similar method available online.:
//-------------------------------------------------------------------------------------------------------
// 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);
这篇关于JQuery切换函数在IE中呈现奇怪的文本(丢失ClearType?)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!