JQuery toggle function rendering weird text in IE (losing ClearType?)

Question

Hi, I have this little script to toggle a contact form when a button is clicked :

$(document).ready(function(){

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

});

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.

Thanks for any help.

Answer 1

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

Answer 2

That is fine for the fade in and fade out functions but not for the toggle function. I have the same issue as the OP.

Answer 3

For Paul, adding to the accepted answers solution, creating a toggle function is simple.

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