【发布时间】：2012-02-11 05:25:36
【问题描述】：
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;
}
【问题讨论】：
-
我不知道从哪里开始。方法是错误的。不要使用绝对位置定位外部元素。不要为每个元素设置动画。而是将两者都包装在一个 div 中并只为该 div 设置动画。然后您可以测量活动幻灯片的高度并相应地移动页脚。
标签： jquery jquery-animate