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

Question

I can easily animate the "opacity" property

$("#blah").animate({ opactiy: 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)

Answer 1

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

Answer 2

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

Answer 3

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.