0

我有一个 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();
});
4

2 回答 2

0

我认为 TweenLite 和 TweenMax 比 jQuery anmiaton 更好：http: //www.greensock.com，特别是在性能方面：http: //www.greensock.com/js/speed.html

于 2012-10-23T12:18:21.817 回答
0

好吧，想通了，发生了两件事，每个 div 上的 1 px 边框没有被计算在内，并且因为 div 的内容是文本 .height 需要为 news_1 到 news_4 的 .innerHeight()

于 2012-10-23T12:51:39.360 回答