在.removeClass上应用SlideUp转换

Question

尝试应用SlideUp转换，而.removeClass。该脚本在页面上显示/隐藏导航菜单向上/向下滚动。我想在导航菜单隐藏时添加转场。 看到这个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>

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