How to make text animate (slide down) with div using .slidedown()

Question

Basically what I am trying to accomplish is having the navigation bar on my site drop down when a certain anchor point is reached. I can't seem to figure out how to get the text to animate (drop down) with the div. The text is stationary and the drop down effect just uncovers it.

Is there a way to have the text move using .slidedown() or do I need to incorporate .animate() to accomplish this? I have tried using the .animate(), but I couldn't figure out how to hide and unhide the div with it. If any one has any suggestions or can point me in the right direction, It will be much appreciated.

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

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

html { height: 2000px; } 

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

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

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

This is what I have working so far : http://jsfiddle.net/Hysteresis/0oazqj4y/36/

Answer 1

This has to do with the nature of fixed elements and how the child elements behave inside them. Since slideDown is animating the height of the element, the p lives inside the fixed element - it's not going to have any effect.

Try adding display:none; to the p CSS, and:

$('#global-nav p').slideDown(500, 'easeOutBounce');

to your JS

Here's a fiddle