Temporaneamente regolare l'altezza dell'elemento a bilico

Question

Ho un tag <h3> con altezza limitata (100 px per esempio, position: absolute) e il testo overflow esso.

Quello che vorrei fare è far scorrere verso il basso verso l'altezza che è necessaria quando il mouse è su di esso e di nuovo a altezza originale (100px).
Spero che hai capito cosa voglio dire

Non credo che utilizza la funzione slideDown () per questo e sono molto deboli in funzione di animare. Qualsiasi aiuto per favore?

Answer 1

È possibile nidificare un div all'interno del h3 che contiene il contenuto e quindi utilizzare il h3 come un contenitore di mascheramento (uso overflow: hidden). Quando passaggio del mouse sopra, sparano una funzione che get è l'altezza del div interno (assicurati di includere tutti i margini o padding). Quindi eseguire voi altezza regolare animare la funzione (in jQuery, qualcosa come $('h3').animate({height: heightVar});) Il mouseout spara una funzione che ripristina l'altezza della parte posteriore H3 a 100px.

Ecco un esempio: http://jsfiddle.net/XR9fb/

Answer 2

È possibile ottenere la vera altezza dell'elemento con la proprietà scrollHeight. Ora, io non so molto di jQuery, ma immagino si può solo chiamare animato per impostare la proprietà altezza CSS al scrollHeight dell'elemento quando gli si libra del mouse IT, e tornare alla altezza originale quando il mouse passa su esso.

Se l'altezza dell'elemento non è fisso, è possibile salve l'altezza corrente da qualche parte prima di visualizzare l'elemento completo, e quando il mouse lascia l'elemento che avete appena ripristina questo stato.