obtenir la hauteur d'origine d'un div

Question

Je règle le css de la div

height:130px;
overflow:hidden;

Je souhaite une animation de la hauteur actuelle à la hauteur d'origine, telle que this , mais je ne peux pas obtenir l’origine height.un moyen posible est chargé après la mémoire, stockez la hauteur dans js, comme ceci

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

mais en faisant cela, le div affichera d'abord tout, puis définira la hauteur à 130px.

des suggestions?

Answer 1

Je l'ai déjà fait auparavant en utilisant la propriété scrollHeight de l'élément.

document.getElementById('element').scrollHeight;

cela vous indique la hauteur de l'élément si la hauteur était définie sur auto et que dépassement de capacité était activé.

Answer 2

La méthode que vous utilisez est la bonne, mais vous aurez peut-être besoin de quelques astuces pour éviter le scintillement visuel que cela vous donnera.

Essayez de déplacer la div en dehors de l’écran, de vérifier la hauteur, puis de la reculer. De même, pendant que nous sommes ici, évitez si possible d'utiliser plusieurs recherches jQuery $ ('. Detail') car cela peut être une opération assez coûteuse.

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

Sinon, si cela ne fonctionne pas pour vous, ne le faites pas, travaillez avec. Il serait peut-être rentable d’envisager des moyens de l’adapter à votre conception, par exemple en commençant par sa taille réelle puis en animant à nouveau à 130 pixels. Cela vous permettra de vérifier gracieusement sa taille normale et de faire savoir à l'utilisateur qu'il y a plus d'informations à voir ici.

Answer 3

Ne pouvez-vous pas développer les divs en supprimant les attributs css?

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

Answer 4

Je pense que c'est le seul moyen. Parce que si vous avez modifié la hauteur en utilisant CSS dans jQuery, la hauteur est devenue la hauteur modifiée. Et la hauteur modifiée est celle à laquelle vous aurez accès.

Le seul scénario possible auquel je puisse penser est de stocker la hauteur d'origine à l'aide de jQuery ou de fournir éventuellement votre hauteur fixe et d'indiquer à jQuery combien de temps il sera étendu.