Älteres jQuery, fadeIn/fadeOut und der Internet Explorer

Kinners, nee! Was habe ich mich heute mal wieder über den Internet Explorer geärgert! Aber was soll man machen – es gibt ja immer noch unbedarfte Mitmenschen, die nur diesen so genannten Browser kennen, und auf die muss man auch eingehen. Und das kostet – vor allem Zeit.

Was ist passiert? Ich arbeite mitunter gern mal mit den Animationsfunktionen der JavaScript-Bibliothek jQuery. So habe ich schon vor fast einem Jahr für eine Freundin eine Seite gebastelt, in der unsere gemeinsamen Urlaubsfotos in Form einer Diashow mit Überblendeffekten ablaufen sollten. jQuery-Funktionen der Wahl waren ‚fadeIn‘ und ‚fadeOut‘. Hat auch alles wunderbar funktioniert – einmal mit Opera, Firefox und Co. getestet, der Freundin den „geheimen“ Link geschickt zum Anschauen – abgehakt und vergessen. War ja nur für uns so …

Nun habe ich dieser Tage eine Seite für ein etwas größeres Publikum entwickelt, in der ich eine ähnliche Diashow meinen Vereinsfreunden präsentieren wollte. Und da ich das Rad nicht neu erfinden wollte, habe ich eben besagte Webseite von damals als Vorlage genommen. Hat auch alles soweit funktioniert – bis ich dann mal auf die glorreiche Idee kam, auch mal mit dem Internet Explorer draufzusehen. Und erst da sah ich: im IE blendet nichts über – die Bilder werden einfach nacheinander übereinander gelegt. Ganz normale IE-Bugs eben :-/

Ich habe dann eine Reihe von CSS-Workarounds ausprobiert mit „filter:inherit“, „opacity: inherit“, mit verschachtelten divs als nachzuladendem Hintergrundbild usw. Krampf eben. Dabei ist die Lösung soooooo einfach:

Ich benutzte vor einem Jahr die jQuery-Version 1.2.6, die solche typischen Fehler im Internet Explorer noch nicht berücksichtigte. Ich habe dann eine etwas neuere Version eingespielt (1.7.2) – im HTML-Code im <head>-Bereich entsprechend angepasst, und siehe da: jetzt spielt auch der zickige IE die Diashows flüssig ab – siehe http://meikelcam.bplaced.net/dk7lj .