animate heightwidth to "auto"

It's not possible to do thing.animate({ "height": "auto" });. So this is Darcy Clarke's method to allow that to work. You essentially clone the element, remove the fixed heights currently inflicting the element, and measuresave the value. Then you animate the real element to that value.

jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, height, width;
    return this.each(function(i, el){
        el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
        height = elem.css("height"),
        width = elem.css("width"),

        if(prop === "height")
            el.animate({"height":height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":width}, speed, callback);
        else if(prop === "both")
            el.animate({"width":width,"height":height}, speed, callback);
$(".animateHeight").bind("click", function(e){
    $(".test").animateAuto("height", 1000);

$(".animateWidth").bind("click", function(e){
    $(".test").animateAuto("width", 1000);

$(".animateBoth").bind("click", function(e){
    $(".test").animateAuto("both", 1000);