ottenere l'altezza dell'origine di un div

Question

Ho impostato il div del css

height:130px;
overflow:hidden;

Voglio un'animazione dall'altezza corrente all'altezza dell'origine come this , ma non riesco a ottenere l'altezza di origine. Un modo possibile è dopo il caricamento dom, memorizza l'altezza in js, in questo modo

$(function(){
    $('.detail').data('originHeight',$('.detail').height());
    $('.detail').css({height:'130px',overflow:'hidden'})
})

ma facendo questo, il div mostrerà prima tutto, quindi imposta l'altezza a 130px.

qualche suggerimento?

Answer 1

L'ho già fatto prima usando la proprietà scrollHeight dell'elemento.

document.getElementById('element').scrollHeight;

indica quanto alto sarebbe l'elemento se l'altezza fosse impostata su auto e overflow fosse abilitato.

Answer 2

Il metodo che hai è nel modo giusto, ma potresti aver bisogno di alcuni hack per evitare lo sfarfallio visivo che questo ti darà.

Prova a spostare il div fuori dallo schermo, controllando l'altezza e poi spostandolo indietro. Inoltre, mentre siamo qui, evita di utilizzare più ricerche jQuery, se possibile $ ('. Detail') poiché questa può essere un'operazione piuttosto costosa.

var $detail = $('.detail');
$detail
    .css({position : 'absolute', left: '-10000px'})
    .data('origHeight', $detail.height())
    .css({position : '', left : '', height : '130px', overflow : 'hidden'})
;

In alternativa, se questo non funziona per te, non lavorare contro di esso, lavora con esso. Potrebbe essere utile considerare i modi per adattarlo al tuo progetto, ad esempio, iniziando a dimensioni intere e poi animando nuovamente a 130px. Ciò ti consentirà di controllare con grazia le sue dimensioni normali, oltre a far sapere all'utente che ci sono più informazioni da vedere lì.

Answer 3

Non puoi espandere i div rimuovendo invece gli attributi css?

$('.detail').css({height:'', overflow:''})

Answer 4

Penso che sia l'unico modo. Perché se hai modificato l'altezza usando CSS in jQuery, l'altezza diventa l'altezza modificata. E l'altezza modificata è quella a cui accederai.

L'unico possibile scenario che mi viene in mente è di memorizzare l'altezza originale usando jquery o magari fornire la tua altezza fissa e dire a jQuery per quanto tempo si espanderebbe.