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

Animieren von Elementen auf automatische Höhe mit jQuery

Bei der Arbeit mit responsiven Layouts kann es erforderlich sein, die Höhe eines Elements zu animieren, um seine Höhe automatisch anzupassen Größe je nach Inhalt. Das direkte Animieren der height-Eigenschaft auf „auto“ führt jedoch möglicherweise nicht zum gewünschten Effekt.

Hier ist ein Beispielcode, der versucht, ein

zu animieren. von 200px auf automatische Höhe:

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

Leider wird dieser Code die Höhe des Elements nicht auf automatisch animieren. Stattdessen wird das Element einfach auf eine Höhe von 0 reduziert.

Um das gewünschte Verhalten zu erreichen, folgen Sie diesen Schritten:

1. Speichern Sie die aktuelle Höhe: Speichern Sie die aktuelle Höhe des Elements, um sie nach Erhalt der automatischen Funktion wiederherzustellen Höhe.

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

2. Höhe vorübergehend auf Auto umstellen: Höhe des Elements vorübergehend auf „Auto“ setzen, um die gewünschte Höhe zu berechnen.

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

3. Ermitteln Sie die automatische Höhe: Ermitteln Sie die Höhe des Elements nach der Einstellung es auf „automatisch“.

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

4. Zurückschalten und zur automatischen Höhe animieren: Stellen Sie die Höhe des Elements auf den ursprünglichen Wert wieder her und animieren Sie es dann zur automatischen Höhe Höhe.

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

Durch die Kombination dieser Schritte gelangen wir zum folgenden Code, der das erfolgreich animiert Element auf automatische Höhe:

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