fadetoggle animate jquery css internet-explorer fonts rendering

animate - jquery show animation



El uso de jQuery animate CSS opacity fade y @ font-face da a Internet Explorer un renderizado de fuentes muy feo? (7)

Sí, es la opacidad en IE. detrás de las escenas jQ usa el control activeX para simular esto, pero eso lleva cosas locas cuando se usa junto con los png transparentes y el tipo colocado sobre él cuando los elementos están animados.

Estoy trabajando en un sitio con HTML / CSS / jQuery que intenta actuar como un sitio Flash. Tuve que usar @ font-face para obtener la fuente deseada. El cliente también quiere el desvanecimiento de texto y contenido (por lo que se parece al archivo Flash). El problema es que la fuente se ve irregular y fea en Internet Explorer.

Mi CSS para la fuente se ve así:

@font-face { font-family: ''SansumiRegular''; src: url(''../fonts/Sansumi-Bold.eot''); src: local(''Sansumi Regular''), local(''Sansumi-Bold''), url(''../fonts/Sansumi-Bold.ttf'') format(''truetype'');}

... que se genera a partir de: http://www.fontsquirrel.com/fontface/generator

El jQuery para el fundido en cosas es así:

$(''#site'').css({opacity: ''0.0''}); ... preloads the images with jQuery, and at callback do fade... $(''#site'').animate({opacity: ''1.0''}, 1000);

Básicamente, no hay forma de evitar el hecho de que necesito usar esa fuente en particular (fuente web no estándar) y tengo que usar algún tipo de técnica de fundido para que se vea como el archivo Flash.

Todo esto se ve muy bien en Firefox, Safari, Chrome ... Pero en IE parece basura, todo irregular y difícilmente ilegible. Después de mirar alrededor, encontré este plugin de jQuery que está destinado a tratar los problemas de ClearType en IE: http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/

... pero tengo la sensación de que este desvanecimiento está causando el problema con las fuentes. Tal vez es el hecho de que IE realmente no es compatible con el comando de opacidad CSS? ... pero se desvanece en uno bien todos los IE ?! Incluso he intentado con una técnica relativamente desconocida de aplicar un color de fondo opaco (como #FFFFFF) a los elementos con el texto en ese desvanecimiento, pero esto todavía no parece hacer nada.

Debe haber distancia alrededor de este problema? Además de este pequeño problema de fuente, ¡el sitio está completo!

Tuve el mismo problema cuando las fuentes parecían irregulares si me desvanecía en el elemento. Intenté configurar el fondo y descubrí que funciona si configuro un fondo opaco (como #fff) Y establezco la opacidad en 0 usando jQuery.css (). Si solo configuro la opacidad en 0 en la hoja de estilos, no funciona. Usé fadeTo en lugar de Animate.

Esto funciona en IE8 para mí, aunque no he probado IE7.

Prueba esto en la hoja de estilo:

.fader { background: none repeat scroll 0 0 #fff; opacity: 0; }

Y esto en JS:

$(''.fader'').css(''opacity'', ''0'').fadeTo(300, 1);

Luché también con el problema de cleartype / opacidad. Descubrí que si el elemento que quiero atenuar tiene un fondo de color sólido configurado (propiedad de fondo de color css), el texto se procesará correctamente durante y después del desvanecimiento. Por lo tanto, si no necesita un fondo transparente para el texto, puede usar esta solución alternativa. Testet solo en IE7.

Mientras espera una versión futura de jQuery, agregar esto antes de su script se asegura de que jQuery elimine el atributo de filtro al final de cualquier animación de opacidad. (A través de http://dev.jquery.com/ticket/6652 )

Esto borró las fuentes feas para mí.

if ($.cssHooks.opacity.set) { $.cssHooks.opacity.defaultSet = $.cssHooks.opacity.set $.cssHooks.opacity.set = function(elem, value) { $.cssHooks.opacity.defaultSet(elem, value) if (!elem.style.filter.replace(// *(alpha/(opacity=100/))?/, '''')) elem.style.removeAttribute(''filter'') } }

Como se menciona en otras respuestas, jQuery usa el filter propiedades de CSS solo de IE para la opacidad en Internet Explorer. Es el uso de esta propiedad lo que causa problemas de representación de texto.

Si elimina el filter CSS cuando se completa la animación, se restaurará el suavizado en el texto:

$(''#site'').animate({opacity: ''1.0''}, 1000, function() { $(this).css(''filter'', ''none''); });

Todavía se verá irregular mientras la animación está en progreso, pero puede no ser notorio si la animación es rápida.

(Este fue un error conocido de jQuery y desde entonces se ha solucionado: http://dev.jquery.com/ticket/6652 )