jquery - 动画一个 DIV 导致另一个移动

Question

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

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

这个 fiddle 说明了一般问题。就目前而言，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正是您要找的。