How do I make a hidden div ease out from the top instead of from the left using .show()?

Question

I am trying to animate my navigation menu to bounce in from the top when it reaches a certain anchor point. I am currently using the .show()/.hide() to accomplish this, but it only eases in from the left. I tried to incorporate .animate() into it with no luck.

This is what I have so far:

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>

I am using the jQuery Easing plugin and have the current code functional here, just scroll down to see it in action: http://jsfiddle.net/Hysteresis/0oazqj4y/30/

Is there an option for .show() to specify the ease in direction or do I need to incorporate the .animate() some how? I am fairly new to jQuery and have been working on this all day to no avail. Any help would be appreciated.

Answer 1

Try using .SlideDown() function in jQuery http://api.jquery.com/slidedown/