動畫一個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。