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();

   Nach dem Login kopieren

2. Stellen Sie die Höhe ein Vorübergehend auf Auto:

   $('#first').css('height', 'auto');

   Nach dem Login kopieren

3. Automatische Höhe berechnen:

   var autoHeight = $('#first').height();

   Nach dem Login kopieren

4. Vorherige Höhe wiederherstellen und Animieren:

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

   Nach dem Login kopieren

5. Schritte verketten:

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

   Nach dem Login kopieren

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!