Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit jQuery die Höhe eines Elements auf seine natürliche Größe animieren?

Wie kann ich mit jQuery die Höhe eines Elements auf seine natürliche Größe animieren?

Susan Sarandon
Susan SarandonOriginal
2024-12-08 07:23:10746Durchsuche

How Can I Animate an Element's Height to Its Natural Size Using jQuery?

Animierbare Elemente mit automatischer Höhe mit jQuery

Elemente auf ihre natürliche Höhe zu erweitern, kann mit Animationen eine schwierige Aufgabe sein. Wie im bereitgestellten Beispiel dargestellt, löst das einfache Einstellen der Höhe auf „Auto“ möglicherweise keine Animation aus.

Um dies zu überwinden, ist ein mehrstufiger Ansatz erforderlich:

  1. Aktuelle Höhe beibehalten:

    var curHeight = $('#first').height();
  2. Stellen Sie die Höhe ein Vorübergehend auf Auto:

    $('#first').css('height', 'auto');
  3. Automatische Höhe berechnen:

    var autoHeight = $('#first').height();
  4. Vorherige Höhe wiederherstellen und Animieren:

    $('#first').height(curHeight).animate({height: autoHeight}, 1000);
  5. Schritte verketten:

    var el = $('#first'),
        curHeight = el.height(),
        autoHeight = el.css('height', 'auto').height();
    el.height(curHeight).animate({height: autoHeight}, 1000);

Indem Sie diese Schritte befolgen, Elemente können stufenlos auf ihre natürliche Höhe animiert werden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery die Höhe eines Elements auf seine natürliche Größe animieren?. 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