jquery animate to min-height or auto

Question

I have some jquery stuff here to animate a layer on click. Problem is sometimes the content may exceed the height allotted in the height setting. Is there any way to modify this to animate the layer to a minimum height or auto instead of a set px amount?

$(function() {
    $(".showcart").click(function(){
        $("#cart").animate({ height: "250px" }).animate({ height: "200px" }, "fast");
    });
    $(".hidecart").click(function(){
        $("#cart").animate({ height: "250px" }).animate({ height: "0px"}, "fast");
    });
});

Answer 1

This is sort of a tough one, because it depends a lot on the structure of your page. If you can set the css min-height, or get the height of another element as a point of reference you could animate to that size making things a little more dynamic. There is unfortunately no auto-magic resize method in jQuery.

$(this).css("min-height"); //Gets min-height CSS property

// or..

$(this).height(); //Gets element height

Hope that helps.

Answer 2

Unfortunately no, you can't tell it to just animate to what will fit. To do this you'll either have to already know the right size or have a way to calculate it.

If this all happens within a single function or a single plugin you may want to consider storing the value of $(this).height() in a variable somewhere before you expand it, hence you'll be able to put it back to where it used to be.

Otherwise one possibility might be to put a div inside the one you intend to grow/shrink and use get $('> div', $(this)).height() to get the height of your div that's inside it which should be the height of the content in it no matter how much you mess with the outside div's height.