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移除margin-top，而不是依赖于前一元素的margin-bottom。

例如......

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

而不是：

#below {
    margin-top: 30px;
}

你会用

#above {
    margin-bottom: 30px;
}

当然，＃above不需要在屏幕上占用任何可见空间，如果你不想要它。

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