jQuery设置的边距顶部使内容跳跃.如何使其平滑动画化

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

本文关键字：跳跃 何使其 平滑 动画 设置 顶部 jQuery      更新时间：2023-09-26

#contentdiv通过jQuery获取margin-top集。此边距与没有设置高度的 #mastheaddiv 高度相同，因为它会发生变化。这一切都很好用。问题是当我重新加载页面时，由于 jQuery 设置的边距，#contentdiv 会"跳"下来。在小提琴中可能很难看到它，但我已经设法重现了我正在经历的事情。如何为边距设置动画#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);

您可以使用animate() 

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

查看演示

试试这段代码

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