una - JQuery función de alternar la representación de texto extraño en IE(¿perder ClearType?)

obtener texto de link jquery

Question

Tengo este pequeño script para alternar un formulario de contacto cuando se hace clic en un botón:

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

Todo funciona bien en Firefox, pero en IE parece que el efecto de fundido de alternancia no se completa al 100%, y el texto se "congela" en algún lugar antes de una renderización completa, perdiendo toda su resolución.

Leí este tema, pero no sé exactamente cómo aplicarlo a mi problema.

Gracias por cualquier ayuda.

Answer 1

Esto puede ser lo que estás buscando. Además, hay una demostración funcional de otro método similar disponible en línea .:

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

Para Paul, al agregar a la solución de respuestas aceptadas, crear una función de alternar es simple.

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