Jquery Animate Height To Auto

I have a ul with an height of 125px. When a user hovers the ul i want that the height will animated to height auto. And when the user is out of the ul that the UL collpase to 125px

Solution 1:

You can do it with scrollHeight.

$('ul').hover(function(){
  $(this).animate({
    height: $(this)[0].scrollHeight+'px'
  }, 400);
}, function(){
  $(this).animate({
    height: '125px'
  }, 400);
});

Solution 2:

try something like this on hover:

var height = $(this).css('height','auto').height();  // get real height
$(this).css('height','125px'); // return current state;
$(this).animate({height: height+'px'}, 400);

The activivty in first two lines should not bee seen by user, but you can get real height of your UL. You can make fancy sliding effect only if you know final height.

The working example is here: http://jsfiddle.net/axpFk/

Solution 3:

Posted this elsewhere, but I feel like its useful here too: I made a little plugin that deals with this problem - should be fairly straightforward, based on Darcy Clarke's method which has been published here, with some (imo) very necessary improvements. Just plug and play for jQuery:

https://github.com/azaslavsky/jQuery-Animate-Auto-Plugin