Question

我有一个带有四个容器的div，溢出隐藏了一些内容，当它被点击时，我希望它能够动画到这四个容器之和的高度。现在它并没有完全达到高度，我不知道为什么。我试图动画到新高度的容器是新闻。我想我有两个问题，为什么我没有将它设置为正确的高度，两个是否有更好的方法将容器的内容添加到一起？我在这里设置了一个js bin http://jsbin.com/elijuj/2/edit，这就是我现在所拥有的代码：

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;
}

JS

$("#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();
});

Answer 1

我认为TweenLite和TweenMax比jQuery动画更好：http://www.greensock.com，特别是在性能方面：{{3p>

Answer 2

好吧想通了，两件事情正在发生，每个div上的1 px的边界没有被计算，并且因为div的内容是文本。对于news_1来说，需要是.innerHeight（） news_4

动画divs高度为其内容的总和

2 个答案: