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