jQuery no se desvanecerá el texto si se coloca: absoluto;

Question

Tengo LI que quiero desvanecer y volver a entrar. Dentro del elemento de la lista tengo algún texto. Este texto se posiciona absolutamente dentro del LI.

La captura es que en IE8 (IE6 y 7 parecen estar bien) puedo hacer que todo se desvanezca excepto el texto:

http://jsbin.com/esamu/13

Si elimino el posicionamiento absoluto en el elemento de texto (en este caso, una p), es decir, puedo desvanecer el texto correctamente:

http://jsbin.com/esamu/14

¿Alguien sabe por qué es esto? ¿Alguien sabe de una solución?

ACTUALIZAR:

Esto parece ser un problema general en IE8 si el texto se coloca en absoluto. Entonces, no es estrictamente absoluto. Tengo un presentimiento, esto se debe al error de desvanecimiento ClearType.

Answer 1

Arnie y Prodigit ofrecieron alternativas útiles. ¡Gracias!

Al final, esta es la solución bastante tonta que surgimos:

En nuestro caso, tenemos una serie de LIS que contienen una imagen con texto en capas (posicionadas) en la parte superior. Nos enfrentamos a todo el LI y, cuando se hace, nos desvanecemos en el siguiente.

El problema era que el texto no se desvanecería/en correctamente en IE8 (y quizás 7). La solución es que en lugar de desvanecer cada li, en su lugar nos estamos desvaneciendo en Una imagen en la parte superior que coincide con el fondo (lo llamo una 'máscara de desvanecimiento de IE'). Una vez que esa imagen está completamente desvanecida, cambiamos el LI en el fondo y luego desvanecemos la imagen en el frente.

Esto nos da exactamente la misma apariencia visual, además de la bonificación de ese tipo permanece suavizado en IE.

Creo que esto también podría usarse para desvanecer a Li en otro (que se desvanece al mismo tiempo que el otro se desvanece) y solo requeriría clonear la 'máscara de desvanecimiento' para cada Li.

Answer 2

Al colocar el texto, IE8 no heredará la opacidad. En realidad, no creo que este sea el mismo problema que ClearType Bug.

He actualizado su script con uno que funciona: http://jsbin.com/esamu/19

Todo lo que hice fue cambiar $ ('li') a $ ('li, p') para que seleccione explícitamente el elemento posicionado.

Answer 3

¿No estoy seguro de por qué, pero ha intentado simplemente agregar las metas para obligar a IE* a renderizar como IE7 para una solución rápida?

Answer 4

Tuve este mismo problema con el texto absolutamente posicionado en IE8 (IE7, 6, estaban bien) y lo resolví asignando un índice Z más alto al elemento que se desvanece y es inferior al desvanecimiento:

$('#fadeoutdiv').css({zIndex:7}).fadeOut(2000); $('#fadeindiv').css({zIndex:6}).fadeOut(2000);

crédito a Al Flemming por esta solución.