动画一个导致另一个移动的DIV

Question

http://jsfiddle.net/AndyMP/nUhhf/1/

这是一个简化的情况，我有一个向下动画的DIV，但目前与下面的页脚DIV重叠。我想要做的是让它相应地向下推动DIV。

这个小提琴说明了一般问题。就目前而言，DIV向下动画，但根本不会移动它下方的那个。

如何让它推动下面的DIV。我知道我可以单独为DIV制作动画，但我确信必须有更好的解决方案。

JQ

$(function() {
    $(".down_link").click(function() {
        $(".block1").stop(true, true).animate({ top: 100 }, 200);
    });

$(".up_link").click(function() {
        $(".block1").stop(true, true).animate({ top: 0 }, 200);
});
});

HTML

<div class="down_link">Down</div>/<div class="up_link">Up</div>

<div class="block1"></div>
<div class="block2"></div>

Answer 1

第二个div保持原位，因为它们都使用position: relative设置样式。

如果您移除position: relative，则可以为marginTop设置动画。看看this是否正在寻找。

Answer 2

动画marginTop代替top。