jQuery fadeIn IE Png Issue al cargar desde externo

Question

Estoy cargando datos de archivos html externos dentro de mi dominio en un div en mi página web usando un método de carga de contenido en jQuery. Saco el div de la nueva página mientras oculto el div en la página actual desvaneciéndolo y desvaneciendo el nuevo. Hay una imagen png en ambos divs y está creando horribles manchas negras en IE, funciona bien en otros navegadores, pero debido a la incapacidad de los IE para procesar múltiples filtros, es un desastre.

Intenté usar la unidad png fix en vano, ¿alguien tiene alguna solución o idea para ayudar a que mis paquetes se vean bien durante esta transición?

i46.tinypic.com/t9dtvr.jpg esta es una captura de pantalla del problema, aclamaciones

también descubrió que el png que se encuentra en la página de forma original (antes de cargar algo nuevo) se desvanece y se integra perfectamente con la unidad png fix, pero las cosas que se cargan y se retiran de los archivos externos no. He agregado la corrección a esas páginas también, pero eso tampoco funciona.

Answer 1

No hay ninguna solución al 100% para el problema. Si tiene áreas semi transparentes de un PNG, cualquier filtro aplicado hará que esas áreas sean completamente opacas. La mayoría de las transiciones de desvanecimiento que he visto aplican el filtro durante el desvanecimiento, luego retíralo después. Esto significa que verá las áreas con alias mientras la imagen se difumina pero se verá bien al final de la transición.

Se puede usar otra solución para partes de una página que son estáticas: si el fondo detrás de la imagen es estático, puede crear una imagen desde ese fondo y usarla como la imagen de fondo de su etiqueta img. Entonces, el desvanecimiento y la salida funcionarán bien. Si la imagen png ya es la imagen de fondo de un elemento, deberás colocarla en un contenedor con el conjunto de imágenes de fondo opaco y desvanecerlo en su lugar.

Si se está desvaneciendo frente a texto o contenido dinámico, no hay mucho que pueda hacer.

---

EDITAR: La siguiente página parece tener una solución que involucra el antiguo filtro AlphaImageLoader y un div principal con el conjunto de filtros de opacidad:

http://blog.mediaandme.be/?ref=17

Answer 2

Tuve un problema similar con el desvanecimiento de elementos con un fondo png transparente. Después de algunas investigaciones, encontré esta página, donde al final encontrarás una solución que me ayudó:

http://www.sitepoint.com/forums/showthread.php?590295-jQuery-fadein-fadeout-of-transparent-png-in-IE7-and-Chrome

El usuario dan.tello utilizó filtros adicionales (CSS) en IE:

.item img {
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
  zoom: 1; }

Answer 3

EDITAR: Vine a publicar que es inútil, pero en realidad hay algunas personas que describen soluciones alternativas. Mira si esto ayuda:

http://groups.google .com / group / jquery-dev / browse_thread / thread / 1f693c5f4e8ea650 / f3bc9685ccb40e70? pli = 1 http://blogs.msdn.com/ie/archive/ 2005/04/26 / 412263.aspx

Answer 4

Estaba teniendo un problema similar. Necesitaba cargar uno de varios PNG transparentes en mi página en función de las aportaciones del usuario, y hacer que desaparezca. Terminé usando la solución de PNG tardía de Drew Diller (diseñada para IE6). Por supuesto, llamar a un documento listo no funciona para contenido dinámico, así que este es mi script:

html = '<img src="selectedimage.png" />';
$('#overlay').html(html);
DD_belatedPNG.fix('#overlay img');
$('#overlay img').hide().fadeIn(1200);

Está funcionando muy bien en IE7, pero aún no he probado IE8.

Answer 5

¿Puede asignar a la imagen png (o al elemento que está difuminado) un valor background-color que no sea transparente? Eso en su mayoría es hels.

Answer 6

@jdln: no estoy seguro de si esto es lo que buscaba y lo expliqué mal, o si esta es otra solución, sin embargo esto me funcionó:

1. Aplique el PNG transparente a un elemento de envoltura
2. Aplica tu fundido a un elemento DENTRO de la envoltura. Esto parece forzar que el elemento del contenedor también se muestre.
3. Oculte el elemento de envoltura, muestre el elemento de contenido utilizando jQuery fade

Por ejemplo:

/* HTML: */
<div id="wrapper">
    <div id="content">I use this for a drop-down menu with a transparent PNG shadow for lte IE8 browsers
    </div>
</div>

/* CSS */
#wrapper{margin-left:-9999px;}

/* jQuery */  
$('#content').hide().fadeIn();

Uso .hide () para asegurarme de que el efecto se inicie desde el principio cada vez, ya que lo llamo desde un evento flotante. Espero que esto haya ayudado!

Answer 7

todo lo que tienes que hacer es hacer que la envoltura (estilo) alrededor del elemento (#outer (tiene el fondo png)) desaparezca la opacidad a 1.0 en el archivo js. funciona muy bien!

ej:

archivo js:

$('#style').fadeIn('slow');

archivo css:

#style
{
    margin:0;
    background:transparent;
    float:left;
}