如何使用 .slidedown() 使用 div 使文本动画（向下滑动）答案

【问题标题】：How to make text animate (slide down) with div using .slidedown()如何使用 .slidedown() 使用 div 使文本动画（向下滑动）
【发布时间】：2014-11-08 03:22:27
【问题描述】：

基本上我想要完成的是在到达某个锚点时让我的网站上的导航栏下拉。我似乎无法弄清楚如何让文本与 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');
    }		
});

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/

【问题讨论】：

标签： jquery animation slide easing

【解决方案1】：

这与fixed 元素的性质以及子元素在其中的行为方式有关。由于 slideDown 正在为元素的高度设置动画，因此 p 位于 fixed 元素内 - 它不会产生任何效果。

尝试将display:none; 添加到p CSS，然后：

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

到你的 JS

Here's a fiddle

【讨论】：

啊，我什至没有考虑固定元素。对这一切还是很陌生。那可行！感谢您的帮助！