jQuery animate height to auto

Question

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 again.

    $('.box .box-overflow ul').hover(function() {
        $(this).animate({
            height: '100%'
        }, 400);
    }, function() {
        $(this).animate({
            height: '125px'
        }, 400);
    });

This working but when a user comes in the ul it expand but not with a nice animated effect?

Can somewone help me with this? :)

Answer 1

You can do it with scrollHeight.

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