Comment animer la hauteur d'un élément sur « auto » avec jQuery ?-tutoriel CSS-php.cn

Comment animer la hauteur d'un élément sur « auto » avec jQuery ?

Mary-Kate Olsen

Libérer： 2024-12-06 02:36:09

original

998 Les gens l'ont consulté

How to Animate an Element's Height to

Animer des éléments à la hauteur automatique avec jQuery

Lorsque vous travaillez avec des mises en page réactives, il peut être nécessaire d'animer la hauteur d'un élément pour ajuster automatiquement sa taille en fonction du contenu. Cependant, animer directement la propriété height sur "auto" peut ne pas produire l'effet souhaité.

Voici un exemple de code qui tente d'animer un

de 200px à hauteur automatique :

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

Copier après la connexion

Malheureusement, ce code n'animera pas la hauteur de l'élément sur auto. Au lieu de cela, il réduira simplement l'élément à une hauteur de 0.

Pour obtenir le comportement souhaité, suivez ces étapes :

Enregistrez la hauteur actuelle : Stockez la hauteur actuelle de l'élément pour la restaurer après avoir obtenu l'auto hauteur.
```
var curHeight = $('#first').height();
```
Copier après la connexion
Basculez temporairement la hauteur sur auto : Réglez temporairement la hauteur de l'élément sur "auto" pour calculer la hauteur souhaitée.
```
$('#first').css('height', 'auto');
```
Copier après la connexion
Obtenir la hauteur automatique : Obtenez la hauteur de l'élément après l'avoir réglé sur "auto".
```
var autoHeight = $('#first').height();
```
Copier après la connexion
Revenir en arrière et animer à la hauteur automatique : Restaurer la hauteur de l'élément à sa valeur d'origine, puis l'animer à la hauteur automatique.
```
$('#first').height(curHeight).animate({height: autoHeight}, 1000);
```
Copier après la connexion

En combinant ces étapes, nous arrivons au code suivant qui anime avec succès le élément à hauteur automatique :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!