Question

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?

Answer 1

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/