Mehrere DIVs nacheinander ein/ausblenden (fadeIn/fadeOut)

Rigoo

Grünschnabel
Hallo zusammen,

einige Tage probiere ich nun schon verschiede Wege/Codeschnipsen und Co. um folgendes zu realisieren: Ich habe verschiedene DIVs (mit unterschiedlichem Inhalt) und möchte, das diese DIVs nacheinander ein und ausgeblendet werden (fadeIN, fadeOut).

Beispiel des Codes:

HTML:
<div class="inhalt">
	<div class="divinhalt">DIVINHALT 1</div>
	<div class="divinhalt">DIVINHALT 2</div>
	<div class="divinhalt">DIVINHALT 3</div>
	<div class="divinhalt">DIVINHALT 4</div>
	<div class="divinhalt">DIVINHALT 5</div>
</div>
Hier sollten nun (ggf. mit weiteren Zusätzen) die DIVs nacheinander ein/ausgeblendet werden, automatisch mit entsprechender Zeit. Dazu habe ich nach langem hin und her eine (eigentlich) funktionierende Möglichkeit gefunden:

HTML:
$(window).load(function(){
	function fadeContent() {
		$(".inhalt .divinhalt:hidden:first").fadeIn(1000).delay(4000).fadeOut(1000, function() {
			$(this).appendTo($(this).parent());
			fadeContent();
		});
	}
	fadeContent();
});

Allerdings funktioniert das ganze nun im IE nicht - hier wird der fadeIn und fadeOut effekt gänzlich ignoriert und die DIVs werden "einfach neu geladen".

Hat jemand eine bessere Idee für die Umsetzbarkeit oder kann mir auf die Sprünge helfen, wieso der IE mich in diesem Fall ärgert?

Rigoo
 
Hi,

in welchen IEs funktioniert das Script denn nicht? (Version, DocType ...)

Ich frage, weil es bei mir im Schnelltest in den Versionen 7 und 8 funktioniert (Quirks- und Standardmode).

Ciao
Quaese
 
Hallo Quaese,

danke für deine Hilfe. Das hat mir schonmal einen Denkanstoß gegeben und ich habe den Grund (aber keine Lösung) gefunden: Sobald ich innerhalb der einzelnen DIVs weitere Inhalte (Grafiken, span, ...) einfüge, die ich z. B. per

Code:
style="position:absolute; top:20px; left:20px;"

ausrichte, funktioniert der fade im IE nicht mehr, in allen anderen Browser jedoch perfekt.

Eine Idee, woran das liegen könnte?

Rigoo
 
Zurück