Ausblenden von Problemen in Internet Explorer 7 bei Verwendung von jQuery

Question

Ich verwende jQuery auf einer Site, an der ich arbeite und alles funktioniert einwandfrei - außer in Internet Explorer 7 (und früheren Versionen, aber die Site unterstützt sie nicht) . Werfen Sie einen Blick auf http://dev.staffanestberg.com/fromsweden/ entweder in Safari oder Firefox, dann in IE7 und Sie werden sehen, was ich meine. Ich benutze derzeit den eingebauten Effekt FadeTo, um den Inhalt zu verblassen, aber ich habe auch versucht, benutzerdefinierte Effekte zu erstellen und sowohl Show/Hide, Animate und FadeUp/FadeDown zu verwenden. Ich benutze auch SWFaddress auf dieser Seite, die Fehler in Verbindung mit IE7 verursachen könnte, aber würde das nicht auch in anderen Browsern angezeigt werden? Was fehlt mir?

-Staffan

Answer 1

Ich habe erfolgreich das Ein-/Ausblenden, fadeTo, fadeUp und fadeDown alle Arbeit in IE6 und höher. Ich finde, dass viele Probleme, die ich mit Animationen habe, die das Aufdecken eines Elements betreffen, darauf zurückzuführen sind, dass das betreffende Element zum Zeitpunkt des Ladens nicht verborgen ist.

Versuchen Sie, das Element (Tabelle oder div), das in style = "display: none" eingeblendet wird, entweder im HTML oder programmatisch zu setzen.

Answer 2

vielleicht ist dies eine gute Lösung für Sie (für mich ist es). Die Lösung ist einfach, aber effektiv (und sehr nett). IE hat Probleme mit Alpha-Transparenz, wenn der Hintergrund seiner Eltern keine Farbe hat (totale Transparenz).

Was wir hier machen (siehe Beispiel unten), ist ein div zuerst hinzuzufügen, das fast transparent ist (transparent für das Auge). Da es das erste div innerhalb des Canvas/Containers ist (=> ein div zum Beispiel) und absolut platziert wird, wird der gesamte Inhalt nach diesem div über dem ersten div platziert, so dass dies der Hintergrund aller anderen Inhalte wird in dieser Leinwand.

Da ein Hintergrund gibt es jetzt, zeigt dh keine unangenehmen schwarzen Flecke (Punkte) oder schwarzer Bereich des beim Verblassen in oder aus (wenn Opazität ändert), oder wenn unter 100.

die Opazität der Leinwand auf einen Wert gesetzt

Nützliche Hinweise - zB mit einem 100x100 Bild:

<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> 

in verblassen oder das Bild mit jQuery faden out:

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

Das ist auch möglich:

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

Das war's!

Schön ist, dass diese Lösung auch mit VML/SVG (Raphael) oder anderen Inhalten, die Alpha-Transparenz hat, funktioniert. Außerdem müssen Sie Ihren JS-Code nicht ändern/hacken, da dieser "Hack" andere Browser nicht beeinträchtigt.

Ich hoffe, es hilft.

Answer 3

Font Cleartype Ausgabe mit Einblenden Ausblenden jQuery

This ist eine wirklich gute Erklärung für das genaue Problem. Es hat mit dem klaren Typ Schriftart in IE zu tun. Das ist ein Fix, den ich benutzt habe.

Beispiel:

// This causes this text glich 
$("#message").fadeIn(); 

// This will fix it 
document.getElementById("#message").style.removeAttribute("filter"); 

Fix ist, den Filter zu entfernen.

$('#message').fadeIn(function(){ 
    this.style.removeAttribute("filter"); 
}); 

Source

Answer 4

jQuery.fn.fixClearType = function(){ 
    return this.each(function(){ 
     if(typeof this.style.filter && this.style.removeAttribute) 
     this.style.removeAttribute("filter"); 
    }) 
} 

Answer 5

ich gefunden habe, was funktioniert am besten einfach einen Hintergrund bewirbt ... Betrachten Sie es als GIF. Also keine jQuery. Reine CSS