javascript - 如何使用 .show() 从顶部而不是从左侧创建隐藏的 div 缓动？

Question

我正在尝试设置导航菜单的动画，使其在到达某个 anchor 时从顶部弹起。我目前正在使用 .show()/.hide() 来完成此操作，但它只能从左侧缓入。我尝试将 .animate() 合并到其中，但没有成功。

这是我到目前为止所拥有的:

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

$(window).scroll(function(){
    if( $(document).scrollTop() >= t ) {
        $('#global-nav').show(500, 'easeOutBounce');
    } else {
        $('#global-nav').hide(500, 'easeInExpo');
    }		
}); 

html { 
  height: 2000px; 
} 
#global-nav {
    height:50px;
    background:#000;
    z-index: 9999;
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%;
    display: none;
}
#about{
   margin-top:400px;
}

<div id="global-nav"></div>

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

我正在使用 jQuery Easing 插件，并且当前代码在这里起作用，只需向下滚动即可查看它的运行情况:http://jsfiddle.net/Hysteresis/0oazqj4y/30/

.show() 是否有一个选项可以指定方向的轻松程度，或者我是否需要以某种方式合并 .animate() ？我对 jQuery 相当陌生，整天都在研究这个问题，但没有成功。任何帮助将不胜感激。

Answer 1

尝试在 jQuery 中使用 .SlideDown() 函数 http://api.jquery.com/slidedown/