javascript - 在.removeClass上应用SlideUp过渡

尝试在.removeClass时应用SlideUp过渡。此脚本在页面上显示/隐藏导航菜单，上下滚动。我想在导航菜单隐藏时添加过渡。
查看此fiddle>

JS

lastScroll = 0;
$(window).on('scroll',function() {
    var scroll = $(window).scrollTop();
    if(scroll === 0){
        $(".nav").removeClass("darkHeader");
    } else if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
    lastScroll = scroll;
});

我试过了：

lastScroll = 0;
    $(window).on('scroll',function() {
        var scroll = $(window).scrollTop();
        if(scroll === 0){
            $(".nav").removeClass("darkHeader");
        } else if(lastScroll - scroll > 0) {
            $(".nav").addClass("darkHeader");
        } else {
            $(".nav").removeClass("darkHeader").slideUp("1000"); //I have Added
        }
        lastScroll = scroll;
    });

不行问题是导航隐藏时如何添加slideUp效果？
我正在尝试点赞This>

最佳答案

是的，您可以使用如下所示的slideUp()和slideDown()函数：

$(window).on('scroll',function() {
    var scroll = $(window).scrollTop();
    if(scroll === 0){
        $(".nav").removeClass("darkHeader");
    } else if(lastScroll - scroll > 0) {
        if(!$(".nav").hasClass('darkHeader')) $(".nav").hide();

        $(".nav").slideDown('fast',function(){
            $(".nav").addClass("darkHeader");
        });
    } else {
        $(".nav.darkHeader").slideUp('slow',function(){
            $(".nav").removeClass("darkHeader");
        });
    }
    lastScroll = scroll;
});

在这里查看使用2个函数的示例：jsfiddle