Question

这个小提琴说明了我试图解决的问题。容器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;
}

Answer 1

修改查看我更新的fiddle

添加了动态更改容器高度的代码。

检查动画版http://jsfiddle.net/skram/fVKDy/17/

另一个版本.. http://jsfiddle.net/skram/fVKDy/16/＆lt; - 区别在于底部区块向上/向下滑动后左/右移位。

检查更新的fiddle演示。

两件事，

为#blog_slide_container添加了固定高度。动画时，动画div的位置变为absolute，因此容器会将其自身重新调整为0 height。

点击右键时在block1上添加了展示。

Answer 2

这就是......我猜 - ＆gt; http://jsfiddle.net/fVKDy/13/ 这两个部分都在这里工作。只需将另一个包装器放到块中并删除那些位置亲属。您需要的唯一非静态定位是在附加包装器上。

这是另一个版本。 http://jsfiddle.net/fVKDy/5/ 我会稍微调整一下..

Answer 3

我相信这就是你要找的东西。

http://jsfiddle.net/fVKDy/11/

我会很快回来并编辑解释（必须运行）。但基本上我添加了一个内部容器，它是动画而不是元素本身。

自动动画DIV

3 个答案: