jQuery: animate to height of div

Question

I have this function:

function fixedFeeSize(i){
    var num1 = $('#num' + i);
    if (num1.hasClass("extended")) {
      num1.stop(true, true).animate({height: '59px'},500);
      num1.removeClass("extended");
    }else{
      var height = 0;
      num1.animate({height: '360px'},500);
      num1.addClass("extended");
    }
    return null;
}

Which expands / contracts a div, however I am struggling to get it to expand to the height of the div as each div (there will be 10+) is going to be different heights.

I tried num1.animate({height: 'auto'},500); which has not worked.

possible duplicate of [JavaScript jQuery Animate to Auto Height](http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height) — techfoobar, Feb 11 '13 at 16:37

Starkers · Answer 1 · 2013-02-18T17:50:08.507

Is this the effect you're after?

jQuery(".menu a").mouseenter(function(){
    jQuery(this).stop().animate({
  height: 200, opacity: 0.5
}, 1000, "linear");
});
jQuery(".menu a").mouseleave(function(){
    jQuery(this).stop().animate({
  height: 18, opacity: 1
}, 1000, "linear");
});

Here's a jsfiddle: http://jsfiddle.net/kKAZx/1/

For further reading, take a look at the full documentation of the .animate function: http://api.jquery.com/animate/

You can combine effects to make all kinds of fantastic, standard-compliant effects.

jQuery: animate to height of div

1 Answers1