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

Answer 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/