4 つのコンテナーを含む div があり、オーバーフローによってこのコンテンツの一部が非表示になり、クリックすると、これら 4 つのコンテナーの合計の高さにアニメーション化したいと考えています。現在、完全な高さに達していませんが、その理由はわかりません。私が新たな高みへとアニメーション化しようとしているコンテナはニュースです。2 つの質問があると思います。なぜ私がやっていることは適切な高さにアニメートしないのですか? 2 つ目は、コンテナーの内容を一緒に追加するより良い方法はありますか? ここで 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();
});