jQuery animate正在移动窗口滚动条并在完成后弹跳

Question

我在点击时显示隐藏的导航。它是一个div，位于bootstrap模板顶部的固定位置。

我想在点击后向下滑动导航，同时调整下页内容的上边距。这一切都有效但我有一个不必要的弹跳效果，每次导航显示自己时滚动条也会略微向下移动。

HTML：            

          <!-- Member Site Sub Nav 2 -->
          <div class="col-xs-12 member-sub-nav-b" id="memberSubNavB">
            <ul>
              <li><a href="">DESIGNATIONS</a></li>
              <li><a href="">MEMBERSHIP PRICING SCHEDULE</a></li>
              <li><a href="">LOCUMS</a></li>
              <li><a href="">MEMBERSHIP TYPES</a></li>
              <li><a href="">MEMBER REWARDS</a></li>
              <li><a href="">ASSOCIATES & LIFE MEMBERS</a></li>
            </ul>
          </div>  
        </div>
        <!-- Member Site Sub Nav 2 Ends -->  

        </div>

        <!-- Section Begins -->
        <section id="data" class="member-text row">

            <div class="col-md-10 col-md-offset-1">

和jQuery：

 function subNavB(){
  $('#mainLogo').click(function(){

      $('#memberSubNavB').slideDown(200, 'linear');
      $('.col-md-10').animate({'marginTop':'2.5em'}, 200, 'linear');

});
}