JQuery Umschaltfunktion Rendering seltsamen Text in IE (verlieren Cleartype?)

Question

Ich habe dieses kleine Skript ein Kontakt-Formular zu wechseln, wenn eine Schaltfläche geklickt wird:

$(document).ready(function(){

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

});

Alle arbeiten OK in Firefox, aber in IE scheint es, wie das Knie der Fade-in-Effekt nicht zu 100% abgeschlossen wird, und der Text ‚eingefroren‘ wird irgendwo, bevor ein vollständige machen, alle seine feine Auflösung zu verlieren.

Ich lese dieses Thema aber ich weiß nicht genau, wie es anzuwenden, um meinen Ausgabe.

Vielen Dank für jede Hilfe.

Answer 1

Dies kann sein, was Sie suchen. Außerdem gibt es eine funktionsfähige Demo von einem anderen ähnlichen Verfahren online zur Verfügung.

//-------------------------------------------------------------------------------------------------------
// 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

Für Paul, das Hinzufügen der akzeptierten Antworten Lösung, die Schaffung einer Toggle-Funktion ist einfach.

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