Created
June 24, 2010 13:29
-
-
Save jpsirois/451445 to your computer and use it in GitHub Desktop.
jQuery Fade ClearType Fix
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/******************************************************************************************************************* | |
@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