Text beim 'Rein-/Rausfahren' mit einziehen

[Nino]

Huhu liebes Forum.

Folgendes:
Ich habe mir aus Langeweile mal ein JS ausgedacht (bin Anfänger), indem man einen Info-Button hat auf den man klickt. Dann fährt der Info-Text in einem Div-Feld heraus, und kann per Klick wieder eingeklappt werden.

Problem:
Wenn Text in dem Div-Feld steht, wird dieser beim Rein-/Rausfahren des Div-Feldes nicht mit eingezogen.

Beispiel:
Die ersten 2 Zeilen des Div-Feldes sind vollgeschrieben, man klickt auf 'Infos' und es sollte ab 0-400 Pixel in einem Zug durchlaufen (height + 2px). Doch die ersten 2 Zeilen werden ohne dieses Durchlaufen sofort angezeigt. Erst, wenn height=Schrifthöhe/2. Zeile (mir fällt gerade kein anderer Begriff ein) ist, dann geht es in einem durchlauf nach unten. Dasselbe auch beim reinfahren.

Frage(n):
-Arbeite ich z.B. mit dem falschen Objekten, sprich Div, oder so?
-Kann ich den 'Fehler' beheben, oder muss ich damit leben?
-Hat jemand sonst noch einen Tipp in Bezug auf das Script / den Aufbau oder sonstiges?

Quelle zum nachschauen meines Beispiels/Problems:
http://freenet-homepage.de/nino-ninoo/index2.html

Gute Nacht noch, lG Nino

[ChrisB]

Hi,

Wenn Text in dem Div-Feld steht, wird dieser beim Rein-/Rausfahren des Div-Feldes nicht mit eingezogen.

Na ja, du hast das Ding ja nur mittels visibility:hidden versteckt - also "mit Platzhalter", also beeinflusst es die Hoehe seines Vorfahren immer noch. Und da der Default fuer overflow visible lautet, ist es dann auch immer ganz zu sehen, sobald du es auf visibility:visible setzt - die Hoehe des Vorfahrenelementes interessiert da nicht, es laeuft einfach aus diesem raus.

MfG ChrisB

[Gernot Back]

Hallo ChrisB,

Na ja, du hast das Ding ja nur mittels visibility:hidden versteckt - also "mit Platzhalter", also beeinflusst es die Hoehe seines Vorfahren immer noch. Und da der Default fuer overflow visible lautet, ist es dann auch immer ganz zu sehen, sobald du es auf visibility:visible setzt - die Hoehe des Vorfahrenelementes interessiert da nicht, es laeuft einfach aus diesem raus.

Ich kann Ninos Code zwar nicht mehr begutachten, denn die Seite existiert nicht (mehr), aber ich würde so etwas an seiner Stelle sowieso ganz ohne Manipulation von Display- oder Visibility-Eigenschaften machen.

Es empfiehlt sich ein äußeres, relativ positioniertes DIV-Element dessen Overflow-Eigenschaft auf hidden gesetzt wird und dessen Höhe man im Verlauf der Animation ändert und ein darin verschachteltes inneres DIV-Element, das an der Unterkante des äußeren DIVs absolut positioniert wird.

Gruß Gernot

[ChrisB]

Hi,

[...] ich würde so etwas an seiner Stelle sowieso ganz ohne Manipulation von Display- oder Visibility-Eigenschaften machen.

Es empfiehlt sich ein äußeres, relativ positioniertes DIV-Element dessen Overflow-Eigenschaft auf hidden gesetzt wird und dessen Höhe man im Verlauf der Animation ändert und ein darin verschachteltes inneres DIV-Element,

Ja, so mache ich das eigentlich auch meistens.

das an der Unterkante des äußeren DIVs absolut positioniert wird.

Oder oben (bzw. dann eigentlich gar nicht explizit positioniert), je nachdem, welchen Effekt man erreichen will - "herunterfahren" oder "aufziehen".

MfG ChrisB

[Matze]

Hallo und guten Morgen!

Quelle zum nachschauen meines Beispiels/Problems:
http://freenet-homepage.de/nino-ninoo/index2.html

ist dir schonmal aufgefallen, dass man die Geschwindigkeit des "Ein- und Ausfahrens" erhöhen kann indem man mehrmals drauf drückt?

Ist zwar ganz nett, aber ich weiß nicht ob es von dir beabsichtigt war und weise dich deshalb mal drauf hin.

Grüße, Matze

[Gernot Back]

Hallo Matze,

ist dir schonmal aufgefallen, dass man die Geschwindigkeit des "Ein- und Ausfahrens" erhöhen kann indem man mehrmals drauf drückt?

Da sollte Nino wohl öfters mal ein clearTimeout() bzw. clearInterval() benutzen.

Gruß Gernot

[ChrisB]

Hi,

ist dir schonmal aufgefallen, dass man die Geschwindigkeit des "Ein- und Ausfahrens" erhöhen kann indem man mehrmals drauf drückt?

Da sollte Nino wohl öfters mal ein clearTimeout() bzw. clearInterval() benutzen.

Nein, eher so lange die Animation laeuft, das erneute Aufrufen der Funktion durch erneutes Klicken unterbinden. So wie's derzeit geregelt ist, hat er dann naemlich zwei oder mehr Timer, die parallel laufen.

MfG ChrisB

[Gernot Back]

Hallo ChrisB,

Da sollte Nino wohl öfters mal ein clearTimeout() bzw. clearInterval() benutzen.

Nein, eher so lange die Animation laeuft, das erneute Aufrufen der Funktion durch erneutes Klicken unterbinden. So wie's derzeit geregelt ist, hat er dann naemlich zwei oder mehr Timer, die parallel laufen.

Ich habe mir angewöhnt, als erstes in einer sich über setTimeout() selbst aufrufenden Funktion das entsprechende clearTimeout() anzuwenden. Dann gibts auch keine Probleme, da darüber auch mehrere Parallelinstanzen desselben Timers "gecleart" werden.

Bei sehr kleinen Intervallen und sehr umfänglichem Code der sich selbst aufrufenden Funktion könnte ich mir aber vorstellen, dass das tatsächlich nicht wirkt, da vielleicht gerade mehrere dieser Parallelinstanzen abgearbeitet werden und nicht gerade im Intervall Pause machen.

Für ruckelfreie Animationen bringt es dem menschlichen Auge aber sowieso nichts, unter 40 Millisekunden zu gehen. Besser als Kino muss eine Animation ja auch nicht sein.

http://de.wikipedia.org/wiki/Bildwiederholfrequenz

Wer eine schnellere Bewegung wünscht, sollte dann lieber die Pixel-Schrittweite erhöhen.

Gruß Gernot

[Gernot Back]

Hallo nochmal,

Nein, eher so lange die Animation laeuft, das erneute Aufrufen der Funktion durch erneutes Klicken unterbinden. So wie's derzeit geregelt ist, hat er dann naemlich zwei oder mehr Timer, die parallel laufen.

Unterbinden des Aufrufs hätte ich bei dieser Testseite gar nicht gebrauchen können, denn da wollte ich auch bei noch nicht vollständig abgeschlossener Animation bei erneutem Klick dieselbe in die Gegenrichtung starten.

Gruß Gernot