Question

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