jQuery animate height on element with min-height property?

Question

I have an element with a min-height of 300px set in CSS:

<!-- HTML -->
<div id="summary"></div>
<div id="collapse"></div>
/* CSS */
#summary { min-height: 300px } 

When I click on the #collapse element, I would like the #summary element to collapse smoothly to a height of 100px.

$("#collapse").click(function() {
   $("#summary").animate({ height: 100}, 1000);
}); 

However, nothing is happening, and I think that is because of the min-height property.

I have read this discussion on the jQuery forums , but I still can't figure out how to make the #summary div animate smoothly - setting the min-height to auto as they suggest makes the div vanish and then reappear! Can anyone help?

UPDATE: I've made a jsFiddle to demonstrate the problem .

Answer 1

you could try to do something like

$("#collapse").click(function() {
   var summary = $("#summary"),
       height  = summary.height();

   summary
     .css({ height: height + 'px', minHeight: 0 }) 
     .animate({ height: 100}, 1000);
});

The idea is to reset the min-height and set the css height property to the computed height of the element itself just before the animation.

Answer 2

You need to use height in css in instead of min-height as you decrease the height to 100 and min-height is 300 on click event.

Live Demo

Change

#summary { min-height: 300px } 

To

#summary { height: 300px; } 

If you need to use min-width then you need to change min-width in animate instead of height.

Answer 3

try this out in the fiddle: http://jsfiddle.net/8jn7v/5/

change this:

height: 50

to this:

$('#summary').animate({ 
  'min-height': 50+'px' // <--see the quotes at min-height and add pixels to it
}, 1000);

min-height lets you not to decrease the height lesser than the min-height

your element is limited to 300px because of the min-height so you have to animate the min-height instead of height