margin-top set by jQuery makes content jump. How can I make it smoothly animate?

Question

The #content div gets a margin-top set through jQuery. This margin is the same height as the #masthead div which does not have a set height because it will be changing. This all works fine. The problem is that when I reload the page, the #content div "jumps" down because of the margin set by jQuery. It may be difficult to see it in the fiddle, but I have managed to recreate what I'm experiencing. How would I animate the margin so #content moves down smoothly?

Fiddle: http://jsfiddle.net/78a55ctm/

HTML

<div id="masthead">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

* { margin:0;padding:0 }

#masthead {
    background: #000;
    color: #000;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#content {
    background: pink;
    color: #fff;
    padding: 10px;
}

JS

var headerTop = $('#masthead').outerHeight();
$('#content').css('margin-top', headerTop);

Answer 1

You can use animate()

$('#content').animate({'margin-top': headerTop + 'px'}, 700, 'easeOutExpo');

check the DEMO

Answer 2

Try this code

var headerTop = $('#masthead').outerHeight();
$('#content').animate({ marginTop: headerTop }, 1000);