Temporaneamente regolare l'altezza dell'elemento a bilico
-
26-09-2019 - |
Domanda
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?
Soluzione
È 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/
Altri suggerimenti
È 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.