在 .removeClass 上应用 SlideUp 过渡

Question

尝试在 .removeClass 时应用 SlideUp 过渡。此脚本 show/hide 页面滚动 Up/down 上的导航菜单。我想在导航菜单隐藏时添加过渡。看到这个 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效果？
我正在尝试做 Like This >

Answer 1

是的，您可以使用如下 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

在 .removeClass 上应用 SlideUp 过渡

Apply SlideUp transition on .removeClass

javascript

jquery

scroll

slideup