Comment animer la hauteur d'une div sur « auto » avec jQuery ?

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

Vous souhaitez animer un div pour ajuster automatiquement sa hauteur en fonction de son contenu. Bien que le code de base soit simple, il se peut qu'il ne fonctionne pas comme prévu. Nous allons approfondir la solution et fournir une explication étape par étape ci-dessous.

Extrait de code

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

Solution

Le code fourni tente d'animer la hauteur du div sur « auto », lui permettant de se développer en fonction de son contenu. Cependant, cela ne fonctionne pas car la hauteur initiale du div est définie sur 200 px. Lorsque la hauteur « auto » est animée à partir de 200 px, il n'y a aucun changement visible.

Étapes

Pour obtenir l'effet souhaité, nous devons d'abord enregistrer la hauteur actuelle ( 200px) et réglez temporairement la hauteur sur « auto » pour calculer la hauteur automatique réelle. Voici comment procéder :

1. Enregistrer la hauteur actuelle :

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

2. Régler la hauteur sur Auto (Temporaire) :

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

3. Obtenir la hauteur automatique :

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

4. Revenir à la hauteur actuelle et Animer :

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

Code combiné :

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

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!