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

Answer 2

This is a bit complicated, 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); 

Answer 3

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

Load the page, save 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 the following:

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

Answer 4

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

In the end, it should be something like this:

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

remove the style check height and 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'}); }); 

you can use .stop () before the animation, but it is up to you (so as not to delay the animation after hanging too long)

Answer 5

You can try this, apparently it works very well.

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

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

Answer 6

Try if this helps:

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

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

Just tested it - it works.

Answer 7

Here's a dynamic way to do this - it works on any navigator without knowing the height.

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