Bild einblenden mit jQuery/fadeIn: Im Firefox blendet das Bild kontinuierlich ein, im IE(8) ruckelt es. Wieso?
Eingetragen von albert39 (384)am 14.10.2011 - 20:36 Uhr in
Das langsame Einblenden eines Bildes funktioniert mit
$("#headerbild").fadeIn(4000, function() {});
und mit Berücksichtigung der erforderlichen Nebenbedingungen (#headerbild {display:none;} einwandfrei.
Im Firefox (3.6) blendet das Bild kontinuierlich und sanft ein. Im Internet Explorer (8) ruckelt es. So als ob die opacity nur in relativ groben Stufen verändert wird.
In anderen Webseiten sehe ich aber auch beim IE ein kontinuierliches Einblenden (weiß natürlich nicht, mit welchem js-Code das gemacht wird.)
Meine Frage: weiß jemand, warum das Einblenden im IE (mit jQuery/fadeIn) nicht kontinuierlich erfolgt? Ginge mit mit einer JavaScript-Funktion besser?
Danke für Eure Hilfe!
Albert
- Anmelden oder Registrieren um Kommentare zu schreiben
Der IE8 scheint allgemein
am 15.10.2011 - 19:17 Uhr
Der IE8 scheint allgemein Probleme mit fadeIn zu haben (google mal nache
Internet Explorer 8 fadeIn)Schau mal, ob du mit fadeTo statt fadeIn weiter kommst.
faddeIn und fadeTo
am 17.10.2011 - 17:22 Uhr
Danke Toni,
also versuchte ich es mit fadeTo.
Aber nirgends finde ich ein Doku, wie die Ausgangsstuation des animierten Objekts zu definieren ist.
"display:none", das bei fadeIn erforderlich ist, funktioniert nicht, das Element (#headerbild) bleibt bei Aktivierung von
$(window).load (function(){$("#headerbild").fadeTo(4000, 1, function() {});
});
Wenn ich mit "filter:alpha(opacity:20);" eine Anfangs-Opacity setze (zunächst nur zum Testen), dann springt das Bild sofort auf 100%, wenn der js-Code arbeitet. Was mache ich da falsch?
Nachtrag: Ich sehe gerade, dass dieser Effekt (sofortiges Springen auf die angegebene Opacity) wieder nur beim IE auftritt. Im Firefox sieht man einen schönen linearen Übergang. Ich werde mich also nach einem Script ohne jQuery umsehen müssen. Hast Du einen Vorschlag?
Herzliche Grüße
Albert
Nee, da habe ich leider
am 17.10.2011 - 19:12 Uhr
Nee, da habe ich leider keinen Vorschlag. Solche FadeIn Sachen bekommst du hier nur mit jQuery hin (oder einer anderen JS-Bibliothek - was bei Drupal sinnfrei wäre - oder indem du das selbst mit Javascript nachbaust, was noch sinnloser wäre).
Probier mal, ob's mit
animate()klappt.