CODEWITHSUNDEEP
jquerycssjquery-animate
Timothy Khouri
Timothy Khouri

Reputation: 31845

In jQuery, how do I animate the "max-height" CSS property?

I can easily animate the "opacity" property

$("#blah").animate({ opacity: 0.5}, 1000);

How can I animate the max-height css property... example:

$("#blah").animate({ "max-height": 350}, 1000);

(hint, that code doesn't work)

EDIT: To answer the questions below:

  1. There are multiple images all of css class "blah"
  2. The images are of random sizes, BUT they all have max-height: 100px
  3. When a user hovers over an image, I want it to animate the max-height (thereby smoothly un-restricting the height)

Upvotes: 14

Views: 26106

Answers (8)

GuyOxford
GuyOxford

Reputation: 75

I just took a look at this and found that it does work. This is what I did: 

$("#blah").animate({"max-height": 350}, {queue: false, duration: 1000});

Works for max-height without any problem.

Upvotes: 0

SharpC
SharpC

Reputation: 7454

Why not just animate the addition of a class?

CSS:

.expanded {
   max-height: 350px;
}

jQuery:

$("#blah").addClass("expanded", 1000);

You may have to add !important to the CSS, but on testing it worked without it.

Upvotes: 0

rfornal
rfornal

Reputation: 5122

I ran into the same thing.

The answer is to use "maxHeight" rather than "max-height" ...

Upvotes: 5

Armand
Armand

Reputation: 2827

Pure 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}

DEMO

Enjoy!

Upvotes: 1

mkoistinen
mkoistinen

Reputation: 7773

This question is getting a bit old, but here's how I solved it using basic jQuery, in case someone else needs a simple solution.

In my case, I have a list of blog posts which are first rendered to the page with a max-height which only shows the first 4 lines of text, the rest being overflow: hidden. I have a expand/collapse button which toggles the article from its collapsed form to expanded (fully displayed) and back again.

At first I tried animating the max-height property directly and, as you've discovered above, this won't work. I also tried this with css transitions with the same disappointing result.

I also tried just setting it to a very large number like '1000em', but this made the animations look dumb as it was literally interpolating to such a large value (as you'd expect).

My solution uses scrollHeight, which is used to determine the natural height of each story once the page is loaded as follows:

$(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

});

To do the same with images, I would just wrap them in an outer div which is what you'll set the max-height and overflow:hidden on, just like I used div.story above.

Upvotes: 10

Timothy Khouri
Timothy Khouri

Reputation: 31845

OK, so there is no way to do what I wanted... So I've had to make my own function to have generic "animation" function (from x to y in d milliseconds).

I wrote a blog post describing how I did it here: Generic "Animate" function with jQuery

I included a demo of what it can do as well. The demo link is at the bottom of the article, or for the impatient, you can just click here.

Upvotes: 0

Stuart Burrows
Stuart Burrows

Reputation: 10814

I'm confused by the requirement here. If you are wanting to animate something presumably it needs to be equal to the max height already. I'd do an of statement to check of an element's height equals its max height, if so remove the max-height and then animate the height. Should be the same effect

Upvotes: 1

IgalSt
IgalSt

Reputation: 1984

I think that you should animate the height property first and when the animation has finished replace set height to auto and reset max-height to what you need it to be:

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

Upvotes: 2

Related Questions