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/