Comment puis-je animer la hauteur d'un élément à sa taille naturelle à l'aide de jQuery ?

Éléments à hauteur automatique animables avec jQuery

Agrandir les éléments à leur hauteur naturelle peut être un exploit délicat à accomplir avec l'animation. Comme illustré dans l'exemple fourni, le simple fait de régler la hauteur sur « auto » peut ne pas déclencher une animation.

Pour surmonter ce problème, une approche en plusieurs étapes est nécessaire :

1. Conserver la hauteur actuelle :

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

2. Définir la hauteur Temporairement en automatique :

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

3. Calculer la hauteur automatique :

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

4. Restaurer la hauteur précédente et Animer :

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

5. Concaténer les étapes :

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

En suivant ces étapes, les éléments peuvent être animés en douceur à leur hauteur naturelle.

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!