jQuery fadeIn IE Png Problema durante il caricamento da esterno

Question

Sto caricando i dati da file html esterni nel mio dominio in un div sulla mia pagina Web usando un metodo di caricamento del contenuto in jQuery. Tiro fuori il div dalla nuova pagina mentre nascondo il div nella pagina corrente svanendo e dissolvendo quello nuovo. C'è un'immagine png in entrambi questi div e sta creando orribili macchie nere in IE, funziona bene in altri browser, ma a causa dell'incapacità di IE di elaborare più filtri sta facendo casino.

Ho provato a utilizzare la correzione dell'unità PNG senza alcun risultato, qualcuno ha qualche correzione o idea per aiutare a mantenere i miei PNG belli durante questa transizione?

i46.tinypic.com/t9dtvr.jpg questa è una schermata del problema, evviva

ha anche scoperto che il png che si trova sulla pagina originariamente (prima di caricare qualcosa di nuovo) sfuma dentro e fuori perfettamente usando la correzione png dell'unità ma roba che carica e poi esce da file esterni non lo fa. Ho aggiunto la correzione anche a quelle pagine ma non funziona neanche.

Answer 1

Non esiste una soluzione al 100% al problema. Se hai aree semi trasparenti di un PNG, tutti i filtri applicati renderanno tali aree completamente opache. La maggior parte delle transizioni in dissolvenza che ho visto applicare il filtro durante la dissolvenza, quindi rimuovere il filtro in seguito. Ciò significa che vedrai le aree con alias mentre l'immagine sfuma ma apparirà bene alla fine della transizione.

Un'altra soluzione può essere usata per parti di una pagina che sono statiche: se lo sfondo dietro l'immagine è statico puoi creare un'immagine da quello sfondo e usarla come immagine di sfondo del tuo tag img. Quindi, dissolvenza in entrata e in uscita funzionerà bene. Se l'immagine png è già l'immagine di sfondo di un elemento, dovrai metterla in un contenitore con l'immagine di sfondo opaca impostata e sbiadirla invece.

Se stai sbiadendo davanti a testo o contenuti dinamici, non c'è molto che puoi fare.

---

EDIT: La pagina seguente sembra avere una soluzione che coinvolge il vecchio filtro AlphaImageLoader e un div padre con il set di filtri di opacità:

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

Answer 2

Ho avuto un problema simile con lo sbiadimento degli elementi con uno sfondo png trasparente. Dopo alcune ricerche ho trovato questa pagina, dove alla fine troverai una soluzione che mi ha aiutato:

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

L'utente dan.tello ha utilizzato filtri aggiuntivi (CSS) in 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

EDIT: sono venuto a postare che è senza speranza, ma in realtà ci sono alcune persone che descrivono soluzioni alternative. Vedi se questo aiuta:

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

Answer 4

Avevo un problema simile. Avevo bisogno di caricare uno dei numerosi PNG trasparenti nella mia pagina in base all'input dell'utente e farlo svanire. Ho finito per usare la correzione PNG ritardata di Drew Diller (destinata a IE6). La chiamata al documento pronto non funziona ovviamente per i contenuti dinamici, quindi ecco come appare la mia sceneggiatura:

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

Funziona benissimo in IE7, ma non ho ancora testato IE8.

Answer 5

Puoi dare all'immagine png (o all'elemento che è sbiadito) un valore background-color diverso da trasparente? Soprattutto fa male.

Answer 6

@jdln - Non sono sicuro se questo è quello che stava cercando e spiegasse male, o se questa è un'altra soluzione, tuttavia ha funzionato per me:

1. Applica il PNG trasparente a un elemento wrapper
2. Applica la dissolvenza a un elemento DENTRO l'involucro. Questo sembra forzare anche la visualizzazione dell'elemento wrapper.
3. Nascondi l'elemento wrapper, mostra l'elemento contenuto usando jQuery fade

Ad esempio:

/* 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 () per assicurarmi che l'effetto inizi ogni volta dall'inizio, come lo chiamo da un evento hover. Spero che questo abbia aiutato!

Answer 7

tutto quello che devi fare è fare in modo che il wrapper (stile) attorno all'elemento (#outer (abbia lo sfondo png)) dissolva l'opacità a 1,0 nel file js. funziona alla grande!

es:

file js:

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

file css:

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