wake-up-neo.net

jquery IE Fadein und Fadeout Opacity

Ich bekomme dieses seltsame Problem in IE mit einem CSS-Overlay. Ich bewerbe mich um eine Lightbox. Grundsätzlich verwende ich fadein und fadeout für Jquery - das Problem ist, dass alles gut funktioniert, AUSSER in IE.

In IE - ich bekomme kein Fadein - stattdessen geht es direkt zum Deckkrafthintergrund.

Beim Ausblenden - entfernt die "Deckkraft" für <1 Sek. Sekunde und rendert die Seite vor dem Entfernen der Überlagerung als "Volltonfarbe".

Kann jemand diesen Fehler beheben? Es ist wirklich ärgerlich - ich verwende alle korrekten Filter usw. Es ist nur der Fadein und der Fadeout in IE?

26
Tom

Ich hatte das gleiche Problem in IE8. Das Festlegen der Deckkraft des DIV in JavaScript vor dem Aufruf von fadeIn () löste das Problem:

$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);

Dies verwendete nur ein einfaches DIV, kein transparentes PNG.

48
woodstylee

vielleicht ist das eine gute Lösung für Sie (für mich ist das so). Die Lösung ist einfach, aber effektiv (und sehr schön). IE hat Probleme mit der Alphatransparenz, wenn der Hintergrund des übergeordneten Elements keine Farbe hat (vollständige Transparenz). 

Was wir hier tun (siehe Beispiel unten), ist das Hinzufügen eines ersten Divs, das fast transparent (für das Auge transparent) ist. Da es sich um das erste Div innerhalb des Canvas/Containers handelt (=> ein Div zum Beispiel) und absolut platziert wird, wird der gesamte Inhalt nach diesem Div auf das erste Div gesetzt, sodass der Hintergrund für alle anderen Inhalte steht in dieser Leinwand.

Da es jetzt einen Hintergrund gibt, zeigt IE beim Einblenden oder Ausblenden (beim Ändern der Deckkraft) oder beim Festlegen der Deckkraft der Leinwand auf einen Wert unter 100 keine unangenehmen schwarzen Punkte (Pixel) oder schwarzen Bereiche.

How to - Beispiel mit einem 100x100-Image:

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png" width="100" height="100"/>
</div>

So blenden Sie das Bild mit jQuery ein oder aus:

    $("#mycanvas").fadeIn("slow", function() 
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);

Das ist auch möglich:

$("myImage").fadeIn("slow");

Das ist es!

Eine schöne Sache ist, dass diese Lösung auch mit VML/SVG (Raphael) oder anderen Inhalten mit Alphatransparenz funktioniert. Sie müssen Ihren JS-Code auch nicht ändern/hacken, da dieser "Hack" keine Auswirkungen auf andere Browser hat.

Ich hoffe es hilft.

6
Erwinus

Ohne exakten Code schwer zu sagen, aber ich weiß, dass IE Probleme mit der Anwendung von Fade-Elementen mit position: relative hat. Wenn Sie also wären, würde ich prüfen, ob Elemente, die Sie zu überblenden versuchen, entweder direkt oder durch ihre Eltern, position: relative angewendet wurden . Ich hoffe es hilft.

0
spirytus

@LoveMeSomeCode (Ich kann nicht direkt auf Ihren Beitrag antworten, da stackoverflow anscheinend denkt, ich brauche X Reputation, da ich auf die Nachricht von jemandem antworten kann - warum?!?!). Kompatibilitätsansicht "(ja, sogar Lamer als der Modus selbst).

Ich bemerkte, dass die Leute beim Betrachten der Website, die ich bei der Arbeit entwickle (unter IE), alle möglichen seltsamen Verhaltensweisen erhalten. Nach einigem Herumspielen entdeckte ich, dass der IE8 eine Einstellung hat, mit der OUT-OF-THE-BOX alle lokalen Seiten in der Kompatibilitätsansicht anzeigt. Unabhängig von Ihrer Dokumentdeklaration oder wie streng Ihre Auszeichnung ist, verwendet der IE8 die Kompatibilitätsansicht für alle Intranetseiten (und ich nehme an, dass localhost gleich ist).

Klicken Sie auf Extras> Einstellungen der Kompatibilitätsansicht> Deaktivieren Sie das Kontrollkästchen "Intranetsites in Kompatibilitätsansicht anzeigen".

Warum auf der Erde dies standardmäßig aktiviert ist, habe ich keine Ahnung, aber es hat eine Menge Ärger mit dem Isolieren und dann dem Reparieren der Leute verursacht.

0
Lev

Hier ist eine weitere mögliche Lösung für dieses Problem ... jQuery hat angeblich einige Probleme (vor 1.4?) Bei der Erkennung der durch CSS festgelegten Opazität. Es scheint keine Probleme zu geben, wenn Sie die Deckkraft der Elemente mit jQuery vor dem Animieren der Deckkraft festlegen (fadeIn, fadeOut, fadeTo und animate). Wie in können Sie sowohl die Deckkraft mit CSS für die unterstützenden Browser einstellen als auch die Deckkraft mit jQuery stapeln und dann im IE ordnungsgemäß funktionieren. Dies gilt auch für die Anzeige von none.

Beispiel:

$('#element').css("opacity","0").fadeIn("slow");

Quelle: http://www.boagworld.com/forum/comments.php?DiscussionID=3555#Item_3

0
styol

In der Situation, in der ich dieses Problem beobachtete, konnte ich es teilweise mit der von @Erwinus beschriebenen Methode beheben. Die Verwendung dieser Technik machte den Halo weit weniger hässlich, aber eine seltsame schwarze Aura war immer noch zu sehen.

Ich konnte einen Hintergrund auf das Bild selbst anwenden,

#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}

Und das Problem wurde perfekt behoben. Ich habe es in meine iefix.css-Datei gesteckt, die über bedingte Kommentare eingefügt wird. Es benötigte kein zusätzliches HTML und bot einen noch schöneren Fade-Effekt als die andere Lösung.

Dies wäre natürlich nicht notwendigerweise die Lösung für alle Fälle, war aber für mich machbar und funktionierte gut.

0
morewry

Ok, ich hatte Probleme damit und keine der Lösungen, die ich online gefunden habe, hat funktioniert .. __ Es hat mich verrückt gemacht, denn wenn man sich die W3C-Seite ansieht: http://www.w3schools.com/Css/css_image_transparency. asp , funktionierte in IE8. Aber ich kopiere es in meine Entwicklungsumgebung, aber das ist nicht der Fall. 

Ich hatte diesen Code:

 <script type="text/javascript">
       $(document).ready(function() {
        $('.disabled').fadeTo("slow", 0.33);
  });
 </script>

Und dieses Markup:

    <a href='homestarrunner.com' class='disabled'>
<img src='http://www.w3schools.com/Css/klematis.jpg' /></a>

Es funktionierte in FF, Chrome, aber alles andere als IE8.

Am Ende stellten wir fest, dass der IE8 das Skript nicht gegen localhost ausführte. Ich habe diesen Code auf einen Webhost kopiert und BAM! Funktioniert einwandfrei. Ich weiß nicht, warum IE8 dies tut, aber ich sehe es als einen weiteren Grund für Entwickler an, IE nicht zu mögen.

Vielleicht ist das nur ich.

0
LoveMeSomeCode

Haben Sie auch prob mit diesem Junk-Browser.

Sie können auch überprüfen, wann der Browser IE ist, anstatt .animate({opacity:0}) zu verwenden. Sie müssen .animate({opacity:'hide'}) verwenden.

0
Jerome