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

Timothy_Khouri_11917 0
Viewed 24634

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)
jquery-animate css jquery
8 Answers

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.

user_17416900

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.

user_18629400
Related