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

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

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 :

1. 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();

2. 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');

3. Obtenir la hauteur automatique : Obtenez la hauteur de l'élément après l'avoir réglé sur "auto".

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

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

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

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!

jquery switch auto Property this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn