Jquery - Animate to height:auto

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

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);

it is a little tricky but it works.

var height = parseInt($("#test").slideDown(0).css("height"));
$("#test").css("height", "0px"); // or any other initial state you want          
$("#test").stop(true, true).animate({ height: height + "px"}, 1000);

My solution is similar to inorganik's in that it works for any number of elements with a given class, except I store the auto heights within the height attribute of each element instead of an array. This makes the auto height of any element easily accessible as $(this).attr('height').

On page load, store the auto heights and then set the elements to the desired height:

$(function() {
  $('.element').each(function() {
    $(this).attr('height', $(this).height() + '');
  })
  $('.element').css('height', '20px');
});

Then, instead of $('.element').animate({height : 'auto'}), you can say this:

$('.element').animate({height : $(this).attr('height')})

In my opinion you should use .scrollHeight, because if there will be in one br more than one line (because text will be too long it will break in two lines).

In the end it should be like this :

http://jsfiddle.net/V9Euk/945/

delete style check height and than add it. so your code should be:

$(document).ready(
function rt() {
    $("#div1").hover(

    function() {

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

    }, function() {

        $('#div1').animate({
            "height": "20px"
        }, "fast");
    });
    heightOfDiv=$("#div1")[0].scrollHeight;
    $('#div1').css({'height':'20px'});
});

before animate you could use .stop() but it depends on you (to dont have non-stoping animation after hovering too long)

You can try this, apparently it works very well.

$('#div1').animate({ 'height': $('#div1')[0].scrollHeight }, "fast")
          .promise().done(function () {
             $('#div1').height('auto');
          });

Edited sample : http://jsfiddle.net/bafsar/Lo04vspb/

Try if this helps:

$('#div1').removeClass("someClassWithYourHeight", "fast");

height should be auto per default, so if you just remove height it should be the same. You need the removeClass from UI Effects: http://docs.jquery.com/UI/Effects/removeClass

Just tested it - it works.

Here's a dynamic way to do it- works on any nav without knowing the heights.

var heights = new Array();
$('ul.nav > li').each(function(i) {
    heights[i] = $(this).find('ul').height();
    $(this).find('ul').height(0);
});
$('ul.nav > li').hover(function() {
    var i = $(this).index();
    $(this).children('ul').stop().animate({height: heights[i]},200);
},function() {
    $(this).children('ul').stop().animate({height: '0'},200);
}); 

Hi give this a try:

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