Vorübergehend einstellen Höhe des Elements auf Schweben

Question

habe ich einen <h3> Tag mit begrenzten Höhe (100 Pixel zum Beispiel position: absolute) und der Text überläuft es.

Was würde ich tun wie es nach unten rutscht über die Höhe, die benötigt wird, wenn die Maus über sie und zurück zur ursprünglichen Höhe (100 Pixel).
Ich hoffe, Sie verstehen, was ich meine

Ich glaube nicht, es slidedown () Funktion für das verwendet, und ich bin sehr schwach in Animate Funktion. Jede Hilfe bitte?

Answer 1

Sie können Nest ein div innerhalb des h3, die den Inhalt enthält, und dann mit dem h3 als Maskierungsbehälter (Verwendung overflow: hidden). Wenn der Benutzer den Mauszeiger über eine Funktion ausgelöst, dass die Höhe des Innenraums div get ist (stellen Sie sicher, dass alle Ränder oder Polsterung enthalten). Dann führen Höhe Sie Animate Funktion einstellen (In jquery, so etwas wie $('h3').animate({height: heightVar});) Die mouseout feuert eine Funktion, die Wiederherstellungen die Höhe des h3 zurück zu 100px.

Hier ist ein Beispiel: http://jsfiddle.net/XR9fb/

Answer 2

Sie können die wirkliche Höhe des Elements mit der scrollHeight Eigenschaft erhalten. Nun, ich weiß nicht wirklich viel von jQuery, aber ich glaube, Sie nur belebter nennen könnte die Höhe CSS-Eigenschaft auf den scrollHeight des Elements zu setzen, wenn die Maus schwebt sie und Rückkehr in die ursprüngliche Höhe, wenn die Maus bewegt sich aus es.

Wenn die Höhe des Elements nicht festgelegt ist, können Sie die aktuelle Höhe irgendwo beruhigen, bevor das volle Element angezeigt wird, und wenn die Maus das Element läßt Sie wieder gerade diesen Zustand.