Edit in JSFiddle

$(function() {
    var MIN_HEIGHT = 150;

    $('.elastic').each(function() {
        var that = this, $that = $(that);

        var min_height = $that.attr('data-elastic-min-height') || MIN_HEIGHT;

        var timer = null;
        function expand() {
            clearTimeout(timer);
            timer = setTimeout(function() {
                $that.animate({'max-height': that.scrollHeight}, 150);
            }, 200);
        }
        function shrink() {
            clearTimeout(timer);
            timer = setTimeout(function() {
                $that.animate({'max-height': min_height}, 150);
            }, 400);
        }

        $that.hover(expand, shrink);

        $that.css({'max-height': that.scrollHeight});
        $that.css('overflow-y', 'hidden');
        shrink();
    });
});

<div class="elastic" data-elastic-min-height="150" style="background-color: #dddddd;">
<p>foo</p>
<p>bar</p>
<p>baz</p>
<p>foobar</p>
<p>quux</p>
<p>hoge</p>
<p>fuga</p>
<p>piyo</p>
<p>puni</p>
<p>hogehoge</p>
<p>foo</p>
<p>bar</p>
<p>baz</p>
<p>foobar</p>
<p>quux</p>
<p>hoge</p>
<p>fuga</p>
<p>piyo</p>
<p>puni</p>
<p>hogehoge</p>
<p>foo</p>
<p>bar</p>
<p>baz</p>
<p>foobar</p>
<p>quux</p>
<p>hoge</p>
<p>fuga</p>
<p>piyo</p>
<p>puni</p>
<p>hogehoge</p>
</div>