jQuery設置的margin-top使內容跳轉。 如何使它動畫流暢？

Question

#content div通過jQuery設置了margin-top設置。 此邊距與#masthead div的高度相同，后者沒有設置高度，因為它會不斷變化。 這一切都很好。 問題是，當我重新加載頁面時，由於jQuery設置的邊距，＃ #content div會“跳轉”。 在小提琴中可能很難看到它，但是我設法重現了自己的經歷。 我將如何為邊距設置動畫以使#content平穩地向下移動？

小提琴： 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

您可以使用animate()

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

檢查演示

Answer 2

試試這個代碼

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