jQuery otomatik yüksekliğe geçiş

Question

125px yüksekliğinde bir ul var. Bir kullanıcı ul üste geldiğinde, yüksekliğin otomatik olarak yüksekliğe animasyon yapmasını istiyorum. Ve kullanıcı ul ulp 125px tekrar ul olduğunda.

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

Bu, ancak bir kullanıcı üsle geldiğinde çalışır, ancak güzel bir animasyon efektiyle değil, genişler mi?

Bu konuda bana yardımcı olabilir misiniz? :) Üzerine giderek böyle

Answer 1

Sen scrollHeight ile bunu yapabilirsiniz.

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

Answer 2

deneyin şey: İlk iki hatlarında

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

activivty kullanıcı tarafından görülen arı olmamalı, ancak UL gerçek yüksekliğini alabilirsiniz. Yalnızca son yüksekliği biliyorsanız, fantezi kayma efekti yapabilirsiniz.

çalışma örneği

buradadır: http://jsfiddle.net/axpFk/

Answer 3

başka yerde bu Yayınlanan, ama ben de burada kendi kullanışlı gibi hissediyorum: Bu sorunla uğraşan küçük eklentisi yaptı - (bazılarıyla, here yayımlanmıştır Darcy Clarke'ın yöntemine dayalı, oldukça anlaşılır olmalıdır imo) çok gerekli iyileştirmeler. Sadece tak ve jQuery için oynamak:

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