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 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? :)

回答1:

You can do it with scrollHeight.

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

回答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/

回答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

来源：https://stackoverflow.com/questions/9209228/jquery-animate-height-to-auto