Problem: fade text in or out in IE and the text loses it’s anti-aliased look and ends up rendering like crap.
Guess what?? IE and jQuery are friends now! Yeah, not really… but I did find this awesome post on: http://www.joelanman.com/archives/15
Basically, it’s a jQuery plugin to remove the Filter CSS property from any element that get called by the fadeTo, fadeOut or fadeIn methods.
Really slick and really useful if you want to anti-alias the text you fade.
Here’s the snippet:
(function ($) {
$.fn.fadeIn = function (speed, callback) {
return this.animate({
opacity: 'show'
}, speed, function () {
if ($.browser.msie) {
this.style.removeAttribute('filter');
}
if ($.isFunction(callback)) {
callback.call(this);
}
});
};
$.fn.fadeOut = function (speed, callback) {
return this.animate({
opacity: 'hide'
}, speed, function () {
if ($.browser.msie) {
this.style.removeAttribute('filter');
}
if ($.isFunction(callback)) {
callback.call(this);
}
});
};
$.fn.fadeTo = function (speed, to, callback) {
return this.animate({
opacity: to
}, speed, function () {
if (to == 1 && $.browser.msie) {
this.style.removeAttribute('filter');
}
if ($.isFunction(callback)) {
callback.call(this);
}
});
};
})(jQuery);