將divs高度設置爲它的內容總和

我有一個div，裏面有四個容器，它溢出隱藏了一些內容，當它被點擊時，我想讓它動畫到這些總和的高度四個容器。現在它並沒有完全達到高度，我不知道爲什麼。我試圖將動畫設置爲新高度的容器是新聞。我想我有兩個問題，爲什麼我沒有將它的動畫設置到正確的高度，還有兩種方法可以更好地將容器的內容添加到一起？我有一個js斌在這裏設立http://jsbin.com/elijuj/2/edit，這是我的代碼現在：將divs高度設置爲它的內容總和

HTML

<body> 
<DIV id="container_total"> 
<div id="news" class="shadow blue"> 
    <div id="news_1">bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla 
blabla bla bla bla bla blabla bla bla bla bla bla</div> 
    <div id="news_2">bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla 
bla</div> 
    <div id="news_3">bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla 
blabla bla bla bla bla blabla bla bla bla bla bla</div> 
    <div id="news_4">bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla 
blabla bla bla bla bla blabla bla bla bla bla bla</div> 
</div> 
<div id="photos" class="shadow blue"> 
</div> 
<div id="welcome" class="shadow blue"> 
</div> 
<div id="update_1" class="shadow blue"> 
</div> 
<div id="update_2" class="shadow blue"> 
</div> 
<div id="events" class="shadow blue"> 
</div> 
<div id="directions" class="shadow blue"> 
</div> 
</DIV> 
</body>

CSS

#container_total { 
width: 489px; 
position: relative; 
border: 1px solid red; 
} 
#news { 
width: 314px; 
height: 165px; 
position: absolute; 
top: 0px; 
left: 0px; 
overflow: hidden; 
cursor: pointer; 
} 
#news_1 { 
padding-top:5px; 
padding-bottom:5px; 
padding-left:10px; 
padding-right:10px; 
border:1px solid blue; 
} 
#news_2 { 
padding-top:5px; 
padding-bottom:5px; 
padding-left:10px; 
padding-right:10px; 
border:1px solid blue; 
} 
#news_3 { 
padding-top:5px; 
padding-bottom:5px; 
padding-left:10px; 
padding-right:10px; 
border:1px solid blue; 
} 
#news_4 { 
padding-top:5px; 
padding-bottom:5px; 
padding-left:10px; 
padding-right:10px; 
border:1px solid blue; 
} 



#photos { 
width: 160px; 
height: 165px; 
top: 0px; 
right: 0px; 
position: absolute; 
} 
#welcome { 
width: 489px; 
height: 200px; 
top: 180px; 
position: absolute; 
overflow: hidden; 
} 
#update_1 { 
width: 160px; 
height: 165px; 
top: 395px; 
right: 175px; 
position: absolute; 
overflow: hidden; 
} 
#update_2 { 
width: 160px; 
height: 165px; 
top: 395px; 
right: 0px; 
position: absolute; 
overflow: hidden; 
} 
#events { 
width: 314px; 
height: 165px; 
top: 575px; 
left: 0px; 
position: absolute; 
overflow: hidden; 
} 
#directions { 
width: 160px; 
height: 165px; 
top: 575px; 
right: 0px; 
position: absolute; 
z-index: 4; 
overflow: hidden; 
} 
.shadow { 
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3); 
-moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3); 
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3); 
} 
.blue { 
background: #eff5f8; 
}

$("#container_total").css("height", $("#news").height() + $("#welcome").height() + 
$("#update_1").height() + $("#directions").height() + 60); 


function news_open() { 

$("#container_total").animate({ 
"height": $("#news_1").height() + $("#news_2").height() + $("#news_3").height() + 
$("#news_4").height() + $("#welcome").height() + $("#update_1").height() + 
$("#directions").height() + 60 
}, 450); 

$("#news").animate({ 
"height": $("#news_1").height() + $("#news_2").height() + $("#news_3").height() +  
$("#news_4").height() 
}, 450); 

$("#welcome").animate({ 
"top":180 + $("#news_1").height() + $("#news_2").height() + $("#news_3").height() + 
$("#news_4").height() - 165 
}, 450); 

$("#update_1").animate({ 
"top":395 + $("#news_1").height() + $("#news_2").height() + $("#news_3").height() + 
$("#news_4").height() - 165 
}, 450); 

$("#update_2").animate({ 
"top":395 + $("#news_1").height() + $("#news_2").height() + $("#news_3").height() + 
$("#news_4").height() - 165 
}, 450); 

$("#events").animate({ 
"top":575 + $("#news_1").height() + $("#news_2").height() + $("#news_3").height() + 
$("#news_4").height() - 165 
}, 450); 

$("#directions").animate({ 
"top":575 + $("#news_1").height() + $("#news_2").height() + $("#news_3").height() + 
$("#news_4").height() - 165 
}, 450); 
} 


$("#news").click(function() { 
news_open(); 
});

來源

2012-10-23 loriensleafs

好吧，弄明白了，發生了兩件事，每個div上1px的邊界沒有被計算，因爲div的內容是文本.height需要爲.innerHeight（） news_1到news_4

來源

2012-10-23 12:51:39 loriensleafs

我想TweenLite和TweenMax優於jQuery anmiaton：http://www.greensock.com，特別是在性能：http://www.greensock.com/js/speed.html

來源

2012-10-23 12:18:21 chrislearn

jquery框架已被公司選中，所以無論好壞，都是我必須使用的。這並不是說實際的動畫是一個問題，而是因爲高度的因素不能正確地增加某些方面。 – loriensleafs

將divs高度設置爲它的內容總和

回答

相關問題