JQuery的動畫（）到最大高度

我有一個div與overflow:hidden和設定的高度。當我運行animate()時，我想讓高度動畫到全尺寸。JQuery的動畫（）到最大高度

例如，我有這樣的：

<a href="#" onclick="lol(); return false;">clicky</a> 

<div style="height:50px; overflow:hidden;" class="main"> 
    <div style="height:100px; background:blue;">text</div> 
    <div style="height:50px; background:yellow;">text</div> 
    <div style="height:50px; background:green;">text</div> 
</div>

這個例子工作，但只是因爲我知道所有的元素的總高度。

<script> 
    function lol() { 
     $("div.main").animate({height:'200px'}, 1000); 
    } 
</script>

^我怎樣才能重新創建不知道總有生高度？

來源

2012-08-15 supercoolville

你可以用編程的方式做同樣的事情，你精神上想出200px的值：sum div.main > div s的高度。

function lol() { 
    var $main = $("div.main"), 
     totalHeight = 0; 

    $main.children().each(function() { 
     totalHeight += $(this).height(); 
    }); 

    $main.animate({height: totalHeight}, 1000); 
}

http://jsfiddle.net/mattball/CXyKK

來源

2012-08-15 01:57:21

這是一個好主意，但如果內部div有利潤率（他們在我的真實版本中這樣做），它將無法正常工作。 – supercoolville 2012-08-15 01:59:51

使用'outerHeight（true）'而不是'height（）'來獲得包括邊距的高度。 – 2012-08-15 02:02:19

@supercoolville這是[其他jQuery函數]（http://api.jquery.com/outerHeight/）的用途。 – 2012-08-15 02:05:22

一個固定的版本爲@ MattBall的答案，它使用.outerHeight(true)包括內部div的利潤率。

function lol() { 
    var $main = $("div.main"), 
     totalHeight = 0; 

    $main.children().each(function() { 
     totalHeight += $(this).outerHeight(true); 
    }); 

    $main.animate({height:totalHeight}, 1000); 
}

來源

2012-08-15 02:07:00 xdazz

如果更改HTML代碼是沒有問題的，你可以簡單地改變你的HTML代碼：

<a href="#" onclick="lol(); return false;">clicky</a> 

<div style="height:50px; overflow:hidden;" class="main"> 
    <div> 
     <div style="height:100px; background:blue;">text</div> 
     <div style="height:50px; background:yellow;">text</div> 
     <div style="height:50px; background:green;">text</div> 
    </div> 
</div>

，你可以得到內部元素的高度是這樣的：

$('div.main > div').outerHeight()

而且這裏是笑的功能：

function lol() { 
    $("div.main").animate({height:$('div.main > div').outerHeight()}, 1000); 
}

來源

2012-08-15 02:11:32 Bilal

JQuery的動畫（）到最大高度

回答

相關問題