jQuery动画使元素消失

Question

我用jQuery制作了一个菜单动画。它可以被可视化HERE。当向下滚动时，它播放，但看起来菜单消失了一秒钟，动画变坏。为什么是这样？

Website HERE

怎样才可以修好？

HTML标记：

<div class="row" id="header-row"> 
    <a href="#"> 
     <img class="logo col-md-3 col-xs-6 col-sm-6 img-responsive src="images/logo-svg.svg"/> 
    </a>                                                         
    <ul class="nav col-md-7 col-md-offset-2"> 
     <?php wp_nav_menu(array('menu' => 'main')); ?> 
    </ul> 
</div> 

的jQuery：

$(function(){ 
    $(window).scroll(function(){ 
    var aTop = $('#wrapper').height(); 
    if($(this).scrollTop()>aTop){ 
     $('.wrapper').stop().animate({ 
      height : '85px' 
     }); 

     $('.logo').stop().animate({ 
      width : '180px', 
      marginTop : '10px' 
     },{ 
     duration: 400, 
     specialEasing: { 
      width: 'linear' 
     }});  

     $('.logo').animate({ 
      marginRight : '55px' 
     },1); 

     $('.nav li').stop().css({ 
       marginTop : '60px' 
      }); 

     scrolledOnTop = false; 
    } 
    }); 
}); 

$(function(){ 
    $(window).scroll(function(){ 
    var aTop = $('#wrapper').height(); 
    if($(this).scrollTop() <= aTop){ 
     $('.wrapper').stop().animate({ 
      height : '142px' 
     },{ 
     duration: 400, 
     specialEasing: { 
      height: 'linear' 
     } 
    }); 

     $('.nav li').stop().css({ 
      marginTop : '90px' 
     }); 



     $('.logo').stop().animate({ 
      width : '222px', 
      marginTop : '24px', 
      marginRight : '5px' 
     },{ 
     duration: 400, 
     specialEasing: { 
      width: 'linear' 
     } 
    }); 

     scrolledOnTop = true; 
    } 
    }); 
}); 

Answer 1

将

$('.nav li').stop().css({ 
    marginTop : '90px' 
}); 

之前本

$('.wrapper').stop().animate({ 
     height : '142px' 
    },{ 
    duration: 400, 
    specialEasing: { 
     height: 'linear' 
    } 
}); 

，并应该停止它消失