Holen Sie sich ein Ursprungshöhe des div

StackOverflow https://stackoverflow.com/questions/827996

  •  06-07-2019
  •  | 
  •  

Frage

Ich habe die div css 

height:130px;
overflow:hidden;

Ich möchte eine Animation von aktuellen Höhe Herkunft Höhe wie dieser , aber ich kann nicht den Ursprung height.one posible Weg ist nach dom geladen, speichern Sie die Höhe in js, wie diese 

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

aber dies zu tun, die div zeigt zuerst alle, dann setzen Höhe 130px.

irgendwelche Vorschläge?

War es hilfreich?

Lösung

ich dies habe zuvor getan, indem das Element des scrollHeight Eigenschaft. 

document.getElementById('element').scrollHeight;

Hier erfahren Sie, wie groß das Element, wenn die Höhe wurde eingestellt wäre auto und overflow wurde aktiviert.

Andere Tipps

Die Methode ist der richtige Weg, aber Sie könnten einige Hacks benötigen die visuelle Flimmern zu vermeiden, dass dies wird Ihnen geben.

Versuchen Sie, die div off-Bildschirm bewegen, um die Höhe prüft und es dann zurückbewegt. Auch während wir hier sind, vermeidet mehrere jQuery-Lookups verwenden, wenn möglich $('.detail'), da dies eine recht teuere Operation sein. 

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

Alternativ kann, wenn dies nicht für Sie arbeiten, arbeiten nicht gegen sie, die Arbeit mit ihm. Es könnte zu zahlen, zu prüfen, es in Ihr Design anzupassen, beispielsweise durch in seiner vollen Größe beginnen und dann zu 130px Animieren zurück. So können Sie anmutig seine normale Größe überprüfen, sowie lassen die Benutzer wissen, dass es mehr Informationen gibt es zu sehen.

Sie können nicht die divs erweitern durch die CSS-Attribute zu entfernen statt? 

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

Ich denke, das ist der einzige Weg. Denn wenn Sie die Höhe mit CSS in jQuery geändert, wurde die Höhe der modifizierte Höhe. Und die modifizierte Höhe ist diejenige, die Sie zugreifen.

Das einzig mögliche Szenario, das ich denken kann, ist der Laden die ursprüngliche Höhe jquery verwenden oder vielleicht Ihre feste Höhe liefern und jQuery sagen, wie lange es dauern würde erweitern.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top