jQuery動畫和CSS保證金

Question

我的動畫有微小的保證金問題。很簡單，我正在隱藏一個元素並將其滑下。這個隱藏的元素有一個30px的上邊距。

$(myselector).animate({ 
    opacity: 100 
    },function() { 
$(this).slideDown(function() { 
    // do stuff here 
}); 

}）;

當動畫開始時，它沒有上邊距，但隨着動畫的運行，它向下滑動，直到它具有30px的上邊距。

我怎樣才能讓動畫以30px的上邊距開始？

Answer 1

我第一次來重建這種行爲企圖造成了同樣的事情..

http://jsfiddle.net/Lvb6t/1/

我所做的是包裹動畫的div在另一個div從動畫DIV刪除margin-top:30px;，並應用一個padding-top:30px;到包含div。

http://jsfiddle.net/Lvb6t/4/

Answer 2

一種替代的解決方案是從除去div中邊距被動畫，而是依賴於下邊距爲前述元件。

例如...

<div id="above">Content</div> 
<div id="below">Content</div> 

相反的：

#below { 
    margin-top: 30px; 
} 

你會使用

#above { 
    margin-bottom: 30px; 
} 

，當然，#above並不需要佔用屏幕上的任何可見空間，如果你不想要的話。

http://jsfiddle.net/Lvb6t/11/