Wie animiere ich die Höhe eines Elements mit jQuery auf „Auto'?-CSS-Tutorial-php.cn

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

Mary-Kate Olsen

Freigeben： 2024-12-06 02:36:09

Original

998 Leute haben es durchsucht

How to Animate an Element's Height to

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

Nach dem Login kopieren

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:

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();
```
Nach dem Login kopieren
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');
```
Nach dem Login kopieren
Ermitteln Sie die automatische Höhe: Ermitteln Sie die Höhe des Elements nach der Einstellung es auf „automatisch“.
```
var autoHeight = $('#first').height();
```
Nach dem Login kopieren
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);
```
Nach dem Login kopieren

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

Nach dem Login kopieren

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!