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

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.