Wie animiere ich die Höhe eines Divs mit jQuery auf „Auto'?

Animieren von Elementen auf automatische Höhe mit jQuery

Sie möchten ein Div animieren, um seine Höhe basierend auf seinem Inhalt automatisch anzupassen. Obwohl der Grundcode einfach ist, funktioniert er möglicherweise nicht wie erwartet. Wir gehen näher auf die Lösung ein und geben unten eine Schritt-für-Schritt-Erklärung.

Code-Snippet

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});

Lösung

Der bereitgestellte Code versucht, die Höhe des Divs auf „Auto“ zu animieren, sodass es basierend auf seinem Inhalt erweitert werden kann. Dies funktioniert jedoch nicht, da die Anfangshöhe des Div auf 200 Pixel festgelegt ist. Wenn die „Auto“-Höhe ab 200 Pixel animiert wird, gibt es keine sichtbare Änderung.

Schritte

Um den gewünschten Effekt zu erzielen, müssen wir zunächst die aktuelle Höhe speichern ( 200px) und setzen Sie die Höhe vorübergehend auf „Auto“, um die tatsächliche automatische Höhe zu berechnen. So geht's:

1. Aktuelle Höhe speichern:

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

2. Höhe auf Automatisch einstellen (Vorübergehend):

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

3. Automatische Höhe abrufen:

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

4. Zur aktuellen Höhe zurückkehren und Animieren:

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

Kombinierter Code:

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 die Höhe eines Divs mit jQuery auf „Auto'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!