jQuery 将高度动画设置为自动

Question

我有一个高度为 125px 的 ul。当用户将鼠标悬停在 ul 上时，我希望高度将动画为自动高度。当用户退出 ul 时，UL 会再次折叠到 125px。

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

这个工作正常，但是当用户进入 ul 时它会展开，但没有漂亮的动画效果？

有人可以帮我解决这个问题吗？ :)

Answer 1

你可以用scrollHeight来做到这一点。

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