Animer l'élément à la hauteur automatique avec jQuery

Question

Je veux animer un

de 200px à une hauteur auto. Mais je n'arrive pas à le faire fonctionner. Est-ce que quelqu'un sait comment faire ?

Voici le code :

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

Answer 1

1. Enregistrer la hauteur actuelle :

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

2. Passer temporairement la hauteur en auto :

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

3. Obtenir la hauteur auto :

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

4. Repasser à la hauteur curHeight et animer jusqu'à autoHeight :

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

Et ensemble :

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

Answer 2

À mon avis, c'est la solution la plus propre et la plus simple :

$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000 );

Explication : Le DOM sait déjà quelle taille aura la div agrandie lorsque sa hauteur est définie sur auto. Cette propriété est stockée dans le nœud du DOM en tant que scrollHeight. Il suffit de récupérer l'élément DOM de l'élément jQuery en appelant get(0) et ensuite nous pouvons accéder à la propriété.

Ajouter une fonction de rappel pour définir la hauteur sur auto permet une plus grande réactivité une fois l'animation terminée (crédit chris-williams) :

$('#first').animate({
    height: $('#first').get(0).scrollHeight
}, 1000, function(){
    $(this).height('auto');
});

Answer 3

Il s'agit essentiellement de la même approche que la réponse de Box9 mais je l'ai enveloppée dans un plugin jquery agréable qui prend les mêmes arguments qu'une animation régulière, pour quand vous avez besoin d'avoir plus de paramètres animés et que vous en avez marre de répéter le même code encore et encore :

;(function($)
{
  $.fn.animateToAutoHeight = function(){
  var curHeight = this.css('height'),
      height = this.css('height','auto').height(),
      duration = 200,
      easing = 'swing',
      callback = $.noop,
      parameters = { height: height };
  this.css('height', curHeight);
  for (var i in arguments) {
    switch (typeof arguments[i]) {
      case 'object':
        parameters = arguments[i];
        parameters.height = height;
        break;
      case 'string':
        if (arguments[i] == 'slow' || arguments[i] == 'fast') duration = arguments[i];
        else easing = arguments[i];
        break;
      case 'number': duration = arguments[i]; break;
      case 'function': callback = arguments[i]; break;
    }
  }
  this.animate(parameters, duration, easing, function() {
    $(this).css('height', 'auto');
    callback.call(this, arguments);
  });
  return this;
  }
})(jQuery);

edit: maintenant en chaîne et plus propre

Answer 4

Une meilleure solution ne devrait pas dépendre de JS pour définir la hauteur de votre élément. Voici une solution qui anime un élément de hauteur fixe pour le mettre à la hauteur complète ("auto") :

var $selector = $('div');
$selector
    .data('oHeight',$selector.height())
    .css('height','auto')
    .data('nHeight',$selector.height())
    .height($selector.data('oHeight'))
    .animate({height: $selector.data('nHeight')},400);

https://gist.github.com/2023150

Answer 5

Ceci fonctionne et c'est plus simple que les solutions précédentes :

CSS:

#container{
  height:143px;  
}

.max{
  height: auto;
  min-height: 143px;
}

JS:

$(document).ready(function() {
    $("#container").click(function() {      
        if($(this).hasClass("max")) {
            $(this).removeClass("max");
        } else {
            $(this).addClass("max");
        }

    })
});

Note: Cette solution nécessite jQuery UI