Question

我的ul高度为125px。当用户悬停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);
});

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

Answer 3

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

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

jQuery动画高度为auto

3 个答案: