Jquery - Animate to height:auto

Question

is it possible to animate -> css('height','auto') ?

working example http://www.jsfiddle.net/V9Euk/154/

CSS

#div1 {
    position:absolute;
    right:30px;
    bottom:0px;
    border:1px solid #ff0000;
    overflow:hidden;
}

html

   <div id="div1" style="height:20px;">
        Test<hr />
        text text <br />
        text text <br />
        text text <br />            
    </div>

jquery

$("#div1").hover(

function() {

    $('#div1').animate({
        "height": "auto"
    }, "fast");                  // <---- dont work :(

}, function() {

    $('#div1').animate({
        "height": "20px"
    }, "fast");
});

Thanks in advance! Peter

Answer 1

This is what i do:

//Get Current Height
var currentHeight = $("#mybox").css("height");

//Set height to auto
$("#mybox").css("height","auto");

//Store auto height
var animateHeight = $("#mybox").css("height");

//Put height back
$("#mybox").css("height", currentHeight);

//Do animation with animateHeight
$("#mybox").animate({
     height: animateHeight
     }, 500);