3

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.

1
  • This also happens for me when I do a simple $('#tagID').show() call as well. Jun 1, 2009 at 14:09

2 Answers 2

10

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);
1
  • I ended up using the solution in the link that you provided since I found it easier to understand. Thanks for the info. Jun 18, 2009 at 14:33
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.