Dans jQuery, comment animer la propriété CSS "max-height"?

Cette question est d'obtenir un peu vieux, mais voici comment je l'ai résolu en utilisant la base de jQuery, dans le cas où quelqu'un d'autre a besoin d'une solution simple.

Dans mon cas, j'ai une liste de blogs qui sont d'abord rendus à la page avec un max-height qui ne montre que les 4 premières lignes de texte, le reste étant overflow: hidden. J'ai un bouton développer/réduire qui permet de passer l'article à partir de sa forme aplatie à l'élargissement (affiche en plein écran) et de retour à nouveau.

J'ai d'abord essayé d'animer le max-height directement la propriété et, comme vous l'avez découvert au-dessus, cela ne fonctionne pas. J'ai aussi essayé avec les transitions css avec le même résultat décevant.

J'ai aussi essayé juste un réglage à un très grand nombre comme "1000em", mais de ce fait les animations sont aussi stupides qu'il était littéralement en interpolant à de telles une grande valeur (comme vous le souhaitez).

Ma solution utilise scrollHeight, qui est utilisé pour déterminer la hauteur de chaque histoire une fois que la page est chargée comme suit:

$(function(){ //DOM LOADED

  //For each story, determine its natural height and store it as data.
  //This is encapsulated into a self-executing function to isolate the 
  //variables from other things in my script.
  (function(){

    //First I grab the collapsed height that was set in the css for later use
    var collapsedHeight = $('article .story').css('maxHeight');

    //Now for each story, grab the scrollHeight property and store it as data 'natural'        
    $('article .story').each(function(){
      var $this = $(this);

      $this.data('natural', $this[0].scrollHeight);
    });

    //Now, set-up the handler for the toggle buttons
    $('.expand').bind('click', function(){
      var $story = $(this).parent().siblings('.story').eq(0),
          duration = 250; //animation duration

      //I use a class 'expanded' as a flag to know what state it is in,
      //and to make style changes, as required.  
      if ($story.hasClass('expanded')) {
        //If it is already expanded, then collapse it using the css figure as
        //collected above and remove the expanded class
        $story.animate({'maxHeight': collapsedHeight}, duration);
        $story.removeClass('expanded');
      }
      else {
        //If it is not expanded now, then animate the max-height to the natural
        //height as stored in data, then add the 'expanded' class
        $story.animate({'maxHeight': $story.data('natural')}, duration);
        $story.addClass('expanded');
      }
    });

  })(); //end anonymous, self-executing function

});

À faire de même avec les images, je voudrais juste envelopper dans une div extérieure qui est ce que vous allez définir le max-height et overflow:hiddentout comme j'ai utilisé de la div.l'histoire ci-dessus.

Je pense que vous devriez animer la propriété height de la première et lorsque l'animation est terminée remplacer régler la hauteur de l'auto et reset max-hauteur de ce que vous avez besoin qu'il soit:

$("#blah").animate({ "height": 350}, 1000, function(){
  $(this).css('height','auto').css('max-height',350);
});

Pur CSS solution

HTML

<div>max-height element</div>

css

div {
    max-height:20px;
    overflow:hidden;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;}

div:hover {
    max-height:300px}

DÉMO

Profitez-en!