2009-05-06 57 views
0

我設置的div的CSS得到一個div的起源高度

height:130px; 
overflow:hidden; 

我想從目前的高度,以高度的起源一樣this的動畫,但我不能讓起源height.one更多鈔票的方法是DOM後加載,存儲在JS的高度,這樣

$(function(){ 
    $('.detail').data('originHeight',$('.detail').height()); 
    $('.detail').css({height:'130px',overflow:'hidden'}) 
}) 

,但這樣做,那麼div會首先顯示所有,然後設置高度130px。

有什麼建議嗎?

回答

1

我之前通過使用元素的scrollHeight屬性完成了此操作。

document.getElementById('element').scrollHeight; 

這告訴你有多高,如果高度爲auto,並啓用overflow元素會。

+0

感謝「使用它」,它確實有效 – limboy 2009-05-07 06:45:37

1

難道你不能通過刪除css屬性來擴展div嗎?

$('.detail').css({height:'', overflow:''}) 
+0

如果我刪除了高度屬性,它會耗費一次,沒有動畫效果 – limboy 2009-05-06 04:30:17

0

我認爲這是唯一的方法。因爲如果您在jQuery中使用CSS修改高度,則高度將成爲修改後的高度。修改後的高度是您將訪問的高度。

我能想到的唯一可能的情況是商店的原始高度使用jquery或者可能提供您的固定高度,並告訴jQuery它會擴展多久。

3

你擁有的方法是正確的,但是你可能需要一些黑客來避免這會給你帶來的視覺閃爍。

嘗試將屏幕移出屏幕,檢查高度,然後將其移回。同樣,當我們在這裏時,避免使用多個jQuery查找$('.detail'),因爲這可能是一個相當昂貴的操作。

var $detail = $('.detail'); 
$detail 
    .css({position : 'absolute', left: '-10000px'}) 
    .data('origHeight', $detail.height()) 
    .css({position : '', left : '', height : '130px', overflow : 'hidden'}) 
; 

另外,如果這不適合你,不要對它工作,使用它。考慮如何將其適用於您的設計可能會付出代價,例如,從全尺寸開始,然後將動畫恢復到130px。這將讓你優雅地檢查它的正常大小,並讓用戶知道有更多的信息可以在那裏看到。

+0

我喜歡這個主意 感謝你的小費 – limboy 2009-05-06 07:46:21