Skip to content

Instantly share code, notes, and snippets.

@jpsirois
Created June 24, 2010 13:29
Show Gist options
  • Save jpsirois/451445 to your computer and use it in GitHub Desktop.
Save jpsirois/451445 to your computer and use it in GitHub Desktop.
jQuery Fade ClearType Fix
/*******************************************************************************************************************
@file jquery.clearTypeFix.fade.js
@function Custom FadeIn/FadeOut/FadeTo : Fix IE ClearType
@source http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/comment-page-1/#comment-123
********************************************************************************************************************/
jQuery.fn.clearTypeFadeTo = function(options) {
if (options)
$(this)
.show()
.each(function() {
if ($.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 ($.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();
});
};
jQuery.fn.clearTypeFadeIn = function(options) {
if (options)
$(this)
.css({ opacity: 0 })
.clearTypeFadeTo({ speed: options.speed, opacity: 1, callback: options.callback });
};
jQuery.fn.clearTypeFadeOut = function(options) {
if (options)
$(this)
.css({ opacity: 1 })
.clearTypeFadeTo({ speed: options.speed, opacity: 0, callback: options.callback });
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment