jQuery animate and css margin

I've got a slight margin issue with my animation. Quite simply I'm taking a hidden element and sliding it down. This hidden element has a 30px top margin.

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

});

When the animation begins it 开发者_运维百科has no top margin but as the animation runs it slides down until it has the 30px top margin.

How can I get the animation to start with the 30px top margin already in place?

---

My first attempt to recreate this behavior resulted in exactly the same thing..

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

What I did was wrap the animated div in another div, remove the margin-top:30px; from the animated div, and applied a padding-top:30px; to the containing div.

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

---

An alternative solution is to remove the margin-top from the div being animated and instead rely on the margin-bottom for the preceeding element.

For example...

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

Instead of:

#below {
    margin-top: 30px;
}

You would use

#above {
    margin-bottom: 30px;
}

And, of course, #above doesn't need to take up any visible space on screen if you don't want it to.

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