✔ Überblenden von dynamischen Texten in divs

[Frozenlife]

Hallo,

ich habe auf meiner Homepage jetzt einmal eine div (später mehrere) die ich dynamisch via Javascript aktualisiere per Button klick. Ich hole mir mittels Ajax die neuen Daten vom Server und gib überschreib dann den Inhalt der div mittels:

document.getElementById('login_form').innerHTML = new_content;

new_content ist der neue Inhalt. Wie kann ich das jetzt so machen, dass ich den alten Inhalt, langsam durch den neuen Inhalt überblende? Also zurzeit ist auf Knopfdruck der neue Text da durch die Zuweisung, aber wie bekomme ich den Effekt zustande? Ich kann eine komplette div entweder langsam sichtbar oder unsichtbar machen, aber das Überlappen schon gar nicht und dann noch mittels innerHtml ...

Kann mir dabei bitte jemand weiterhelfen?

Danke schon einmal!!

mfg

 

[Maik]

Hi,

schau dir hierfür beispielsweise mal .fadeIn(), .fadeOut(), oder .fadeTo() an.

mfg Maik

 

[Sven Mintel]

Moin,

nehme 2 Divs, eines für den alten Text, eines für den neuen.

Beide Divs platziere in einem gemeinsamen Eltern-Div, dem du die CSS-Eigenschaft position:relative gibst.

Den beiden Divs im Eltern-Div gebe die CSS-Eigenschaften position:absolute;top:0

Dadurch hast du schon mal die überlappenden Divs.
Du kannst jetzt eines oder beide blenden, oder die Schichtposition ändern.

 

[one6666]

Ich würde auch mit 2 Divs arbeiten, der alte Div in dem der Inhalt steht ist sichtbar, und der neue Div ist auf dem alten aber noch unsichtbar (display:none; ),
sobald dann readyState den Wert 4 erreicht hat,
würde ich mit einen Zähler( http://aktuell.de.selfhtml.org/artikel/javascript/timer/ ) den alten Div in seiner Transparenz runterzählen lassen, und bei 50% den neuen Div der noch unsichtbar ist wieder sichtbar machen,
und dann von 0% hochzählen lassen,
so erreichst du einen perfekten Übergang

Zusatz:
Wenn der neue Div unter dem Alten liegt, und readyState den Wert 4 erreicht hat, kannst du den neuen Inhalt dem Div zuweisen und den alten Div in seiner Transparenz von 100% auf 0% zählen lassen,
der User merkt da keinen unterschied, so mache ich es bei einer Bilder Galerie wo die Bilder sich auch gnaz sanft überlegen sollen.

 

[Frozenlife]

Danke einmal . Hat ziemlich gut geklappt!

mfg