javascript - 有没有办法在不使用负像素值的情况下缓入和缓出动画 div？

Question

我希望导航栏在某个 anchor 缓入缓出。我已经完成了任务，但是我发现在动画发生时滚动会由于负像素值和文档顶部而中断动画。有没有办法让导航使用我设置的动画而不使用负像素值来隐藏和显示它？

我已经尝试了 visibility: hidden; 的 .show()/.hide() 选项，但我似乎无法弄清楚如何将它们与 .animate() 合并。

var t = $("#about").offset().top;

$(window).scroll(function(){
    if( $(document).scrollTop() >= t ) {
        $('#global-nav').stop().animate({top: '0px'}, 500, 'easeOutBounce');
    } else {
        $('#global-nav').stop().animate({top: '-50px'}, 500, 'easeInExpo');
    }		
}); 

html { height: 2000px; } 

#global-nav {
    height:50px;
    background:#000;
    z-index: 9999;
    position: fixed; 
    left: 0; 
    top: -50px; 
    width: 100%;
    color:#fff;
    text-align:center;
    
}
#global-nav p {
    margin-top:15px;
}
#about{
   margin-top:600px;
}

<div id="global-nav"><p>Navigation</p>.</div>

<div id="about"></div>

这是我到目前为止所取得的成就:http://jsfiddle.net/Hysteresis/0oazqj4y/43/

任何帮助将不胜感激。

Answer 1

实际上，您的动画使用了 easing 效果，因此它看起来像是在犹豫，但是如果您在隐藏元素时移除 easing 效果，那么它看起来会更闷;例如:

// Without "easeInExpo" easing effect
else {
    $('#global-nav').stop()
    .animate({top: '-50px'}, 500);
}

This looks smooth.