Heim >Web-Frontend >CSS-Tutorial >Wie animiere ich ein Div-Element mit jQuery auf automatische Höhe?

Wie animiere ich ein Div-Element mit jQuery auf automatische Höhe?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-07 06:25:191024Durchsuche

How to Animate a Div Element to Auto Height Using jQuery?

Element mit jQuery auf automatische Höhe animieren

Beim Versuch, ein

Wenn Sie ein Element von einer bestimmten Höhe auf die automatische Höhe verschieben, können Probleme auftreten. Um dieses Problem zu beheben, ziehen Sie die folgende Lösung in Betracht:

  1. Speichern Sie die aktuelle Höhe:Bestimmen Sie die Höhe des
    vor der Größenänderung.
var curHeight = $('#first').height();
  1. Übergang zur automatischen Höhe: Überschreiben Sie die Höheneigenschaft für einen Moment mit „auto“.
$('#first').css('height', 'auto');
  1. Ermitteln Sie die automatische Höhe: Rufen Sie die natürliche Höhe ab
    mit automatischer Höhe.
var autoHeight = $('#first').height();
  1. Zurücksetzen und animieren: Stellen Sie die ursprüngliche Höhe wieder her und starten Sie die Animation auf die automatische Höhe.
$('#first').height(curHeight).animate({height: autoHeight}, 1000);
  1. Verketten Sie den Code: Kombinieren Sie alle Schritte für eine einfache Lösung.
var el = $('#first'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);

Das obige ist der detaillierte Inhalt vonWie animiere ich ein Div-Element mit jQuery auf automatische Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn