http://jsfiddle.net/AndyMP/fVKDy/
Эта скрипка иллюстрирует проблему, которую я пытаюсь решить.Контейнер DIV вмещает два анимированных DIV.Второй DIV имеет меньшую высоту, чем первый, потому что там меньше контента.Я пытаюсь сделать так, чтобы нижний DIV автоматически сдвигался вверх в соответствии с высотой содержимого во втором DIV, когда он видимНо он скользит вверх и через второй DIV.
Есть мысли о том, как решить эту проблему?
$(function() {
$(".left_slide").click(function() {
$(".block1").stop(true, true).animate({ left: -400 }, 500).hide(1000);
$(".block2").stop(true, true).animate({ left: 0 }, 500);
});
});
$(function() {
$(".right_slide").click(function() {
$(".block2").stop(true, true).animate({ left: 400 }, 500);
$(".block1").stop(true, true).animate({ left: 0 }, 500);
});
});
CSS
#blog_slide_container {
position: relative;
width: 400px;
z-index: 5;
overflow: hidden;
border: 1px solid #000;
}
.block1 {
position: relative;
top: 0px;
left: 0px;
width: 400px;
z-index: 6;
background-color: #333;
color: #FFF;
}
.block2 {
position: absolute;
top: 0px;
left: 400px;
width: 400px;
z-index: 6;
background-color: #CCC;
color: #FFF;
}
#bottom_container {
position: relative;
float: left;
width: 100%;
height: 280px;
z-index: 3;
background-color: #000;
}