jQuery: animate height and width to auto

by gabrieleromanato

HTML

<div id="test"></div>

CSS

#test {
    width: 100px;
    height: 100px;
    margin: 2em auto;
    padding: 2em;
    background: gray;
}

JavaScript

(function($) {

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

            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);
            }
        });
    }
})(jQuery);



$('#test').click(function() {
    $(this).animateAuto('both', 1000);
});