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;を削除し、適用し、何をしましたかa 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/