javascript - JQuery 动画与 slidedown

Question

我的顶部导航有一个动画。向下滚动时效果很好，但动画带有淡入淡出效果。我想要的是背景的下拉效果。由于滚动不会触发向下滑动，因此无法使其像向下滑动一样工作。谁能帮帮我？

这是我的网站:

http://goo.gl/8xt1XZ

这是我的代码:

$(function() {
var floating_navigation_offset_top = $('#floating-nav').offset().top;
$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop > floating_navigation_offset_top)
        $('#floating-nav').stop().animate({'opacity':'1'},800).css({'position':'fixed','top': '0', 'z-index': '99'});
    else   
        $('#floating-nav').stop().animate({'opacity':'0'},40);
});

});

Answer 1

据我了解，如果您想要向下滑动效果，而不是设置 opacity 动画，只需将 height 设置为从 0 到向下滑动菜单高度的动画。

更新:

更好的是，根据 Alexander Lozada 的评论，您可以使用 .slideDown() 函数。

$(selector).slideDown(speed,callback);

进一步更新:根据要求，这是一个简单的 fiddle

注意:要使 slideDown 正常工作，应通过 JQ 方法(例如 slideUp())或 css display:none 等隐藏元素