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

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!