jQuery动画高度自动答案

【问题标题】：jQuery animate height to autojQuery动画高度自动
【发布时间】：2012-03-01 19:51:11
【问题描述】：

我有一个高度为 125 像素的 ul。当用户将 ul 悬停时，我希望高度将动画为高度自动。而当用户离开ul时，UL再次colpase到125px。

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

这可行，但是当用户进入 ul 时，它会展开但没有很好的动画效果？

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

【问题讨论】：

检查animate()函数上的easing参数
什么是“不好的动画效果”？
@ggzone 就像使用 CSS 进行悬停一样......没有动画。他只是在那儿闲逛。

标签： jquery height html-lists expand

【解决方案1】：

您可以使用 scrollHeight 来做到这一点。

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

【讨论】：

【解决方案2】：

在悬停时尝试这样的操作：

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

前两行的活动不应该被用户看到，但你可以得到你的 UL 的真实高度。只有知道最终高度，才能做出精美的滑动效果。

工作示例在这里：http://jsfiddle.net/axpFk/

【讨论】：

【解决方案3】：

在其他地方发布了这个，但我觉得它在这里也很有用：我制作了一个小插件来处理这个问题 - 应该相当简单，基于已发布 here 的 Darcy Clarke 的方法，有一些 (imo)非常必要的改进。 jQuery 即插即用：

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

【讨论】：