jQuery动画高度为自动

Question

我有一个高度为125px的ul。当用户悬停UL时，我希望高度会动画到高度自动。而当用户超出UL认可的125ppx再次。

$('.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); 

的activivty在头两行不应该由用户蜜蜂看到的，​​但你可以得到你的UL的实际高度。只有当你知道最终身高时，才能做出幻想的滑动效果。

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

Answer 3

其他地方发布这个，但我觉得它有用在这里太：我做了一个小插件，这个问题涉及 - 应该是相当简单的，基于达西·克拉克的方法已被公开here，有一些（ imo）非常必要的改进。即插即用的jQuery：

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