自动动画DIV

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; } 

Answer 1

编辑：检查我的更新小提琴

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

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

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

---

查看更新的小提琴演示。

两件事情，

1. 为#blog_slide_container添加了固定高度。 动画时，动画div的位置变为absolute ，因此容器将自身重新调整为0 height 。
2. 单击block1时在block1上添加了show。

Answer 2

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

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

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

Answer 3

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

---

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