Как сделать текст анимацией (слайд вниз) с помощью div .slidedown()

Question

В основном, что я пытаюсь сделать, когда панель навигации на моем сайте выпадает, когда достигается определенная опорная точка. Я не могу понять, как получить текст для анимации (выпадающего) с помощью div. Текст неподвижен, и эффект понижения просто раскрывает его.

Есть ли способ перемещения текста с использованием .slidedown() или мне нужно включить .animate(), чтобы выполнить это? Я попытался использовать .animate(), но я не мог понять, как скрыть и отобразить div с ним. Если у кого-то есть какие-либо предложения или я могу указать мне в правильном направлении, он будет очень признателен.

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

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

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>

Это то, что я работаю до сих пор: http://jsfiddle.net/Hysteresis/0oazqj4y/36/

Answer 1

Это связано с характером fixed элементов и как дочерние элементы ведут себя в них. Поскольку slideDown анимирует высоту элемента, p живет внутри элемента fixed - это не будет иметь никакого эффекта.

Попробуйте добавить display:none; к p CSS, а также:

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

на ваш JS

Here's a fiddle