jQuery fadeIn IE png Problem, wenn sie von externen Laden

StackOverflow https://stackoverflow.com/questions/1808015

Frage

Ich lade Daten von externem HTML-Dateien innerhalb meiner Domain in ein div auf meiner Webseite eine Last Gradmethode in jQuery verwenden. Ich nehme den div aus der neuen Seite, während die div in der aktuellen Seite versteckt durch das Ausblenden und in die neuen Verblassen. Es ist ein PNG-Bild in diesen beiden divs und es schafft schreckliche schwarze Kleckse in IE, funktioniert gut in anderen Browsern aber aufgrund IEs Unfähigkeit, mehrere Filter zu verarbeiten sein ein Chaos.

Ich habe versucht, das Gerät verwenden ohne Erfolg png fix, hat jemand irgendwelche Korrekturen oder Ideen zu helfen, meine pngs zu halten während dieses Übergangs gut aussehende?

i46.tinypic.com/t9dtvr.jpg dies ist ein Screenshot des Problems, cheers

hat auch entdeckt, dass der png, die auf der Seite originaly ist (bevor man etwas Neues Laden) blendet und aus perfekt der png-Einheit mit fix aber Sachen Laden in und dann wieder heraus aus externen Dateien tun. Ive hinzugefügt, um das Update auf diese Seiten auch, aber das tut entweder Arbeit.

War es hilfreich?

Lösung

Es gibt keine 100% ige Lösung für das Problem. Wenn Sie halb transparente Bereiche eines PNG haben, angewendet alle Filter werden diese Bereiche vollständig undurchsichtig machen. Die meisten Fading Übergänge ich je gesehen habe die Filter während der Fade anwenden, dann entfernen Sie die Filter danach. Dies bedeutet, dass Sie die aliased Bereiche sehen, während das Bild eingeblendet wird, aber es wird am Ende des Übergangs gut aussehen.

kann eine andere Lösung für Teile einer Seite verwendet werden, die statisch sind: Wenn der Hintergrund hinter dem Bild statisch ist Sie ein Bild von diesem Hintergrund erstellen und es als Hintergrundbild Ihres img-Tag. Dann wird in und aus Verblassen gut funktionieren. Wenn das PNG-Bild bereits das Hintergrundbild eines Element ist, müssen Sie es in einem Behälter mit dem undurchsichtigen Hintergrundbild setzen gesetzt und verblassen, dass statt.

Wenn Sie vor Text oder dynamische Inhalte Verblassen, gibt es nicht viel Sie tun können.

EDIT: Die folgende Seite scheint eine Lösung zu haben, die alten Alphaimageloader-Filter und einen Elternteil div mit dem Opazität Filtersatz Einbeziehung:

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

Andere Tipps

Ich hatte ein ähnliches Problem mit mit einem transparenten PNG-Hintergrund in Elementen verblassen. Nach einigen Recherchen fand ich diese Seite, wo Sie am Ende eine Lösung finden, die mir geholfen haben:

EDIT: Ich kam zu schreiben, dass es hoffnungslos ist, aber es gibt tatsächlich einige Leute beschreiben Umgehungen. Prüfen Sie, ob das hilft:

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

Ich habe ein ähnliches Problem. Ich brauchte eine von mehreren transparent PNGs in meine Seite, basierend auf Benutzereingaben zu laden, und haben sie verblassen in. Endete ich Drew Diller des Verspätete PNG Fix mit bis (vorgesehen für IE6). Der Aufruf an Dokument bereit funktioniert nicht für dynamische Inhalte natürlich, so ist hier, was mein Skript wie folgt aussieht: 

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

Es funktioniert großartig in IE7, aber ich habe nicht getestet IE8 noch.

Können Sie das PNG-Bild geben (oder das Element, das ausgeblendet wird) einen background-color anderen Wert als transparent? Die meist hels.

@jdln - Ich bin nicht sicher, ob dies ist, was sie wollte und erklärte, es falsch, oder wenn diese eine andere Lösung ist, aber dies war für mich:

  1. Tragen Sie die transparente PNG mit einem Wrapper-Element
  2. Tragen Sie Ihre verblassen zu einem Element innerhalb des Wrapper. Dies scheint das Hüllenelement zu zwingen, auch angezeigt werden.
  3. , um das Hüllenelement verbergen, zeigt das Inhaltselement mit jQuery verblasst

Zum Beispiel: 

/* 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();

Ich benutze .Hide (), um sicherzustellen, dass die Wirkung von Anfang an jedes Mal gestartet wird, wie ich dies von einem Hover-Ereignisse nenne. Hope this geholfen!

alles, was Sie tun müssen, ist die Verpackung machen (Stil) um das Element (#outer (hat Hintergrund png)) verblassen die Opazität bis 1,0 in js-Datei. funktioniert super!

ex:

js-Datei: 

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

CSS-Datei: 

#style
{
    margin:0;
    background:transparent;
    float:left;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top