Chiều cao động của jQuery để tự động

Question

Tôi có một điểm ảnh có chiều cao là 125px. Khi người dùng di chuyển ul tôi muốn rằng chiều cao sẽ hoạt hình đến chiều cao tự động. Và khi người dùng ra khỏi ul, UL thu lại 125px một lần nữa.

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

Điều này làm việc nhưng khi người dùng đến với nó mở rộng nhưng không có hiệu ứng hoạt hình đẹp?

Có thể có ai đó giúp tôi với điều này? :)

Answer 1

Bạn có thể làm điều đó với scrollHeight.

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

Answer 2

thử một cái gì đó như thế này trên di chuột:

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

Các activivty trong hai dòng đầu tiên không nên ong nhìn thấy bởi người sử dụng, nhưng bạn có thể có được chiều cao thực sự của UL của bạn. Bạn có thể tạo hiệu ứng trượt ưa thích chỉ khi bạn biết chiều cao cuối cùng.

Ví dụ làm việc là ở đây: http://jsfiddle.net/axpFk/

Answer 3

văn này ở nơi khác, nhưng tôi cảm thấy như hữu ích của nó ở đây quá: Tôi đã thực hiện một plugin nhỏ mà giao dịch với vấn đề này - nên khá đơn giản, dựa trên phương pháp Darcy Clarke đã được công bố here, với một số (imo) những cải tiến rất cần thiết. Chỉ cần cắm và chơi cho jQuery:

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