带方向和动画的jQuery toggleClass

Question

我按照教程向网站添加了一个固定标题，滚动后网站的徽标出现在固定部分。

这一工程，代码：

var nav_container = $(".nav-container"); 
var nav = $("nav"); 
var logo = $("logo"); 

nav_container.waypoint({ 
    handler: function(event, direction) { 
     nav.toggleClass('sticky', direction=='down'); 
     logo.toggleClass('logo_sticky', direction=='down'); 
     if (direction == 'down') 
      nav_container.css({ 'height' : nav.outerHeight() }); 
     else 
      nav_container.css({ 'height' : 'auto' }); 
    }); 
}); 

如何添加淡入到标识的延迟，所以它不会突然出现？

版本我已经试过：

logo.toggleClass('logo_sticky', direction=='down').delay(500).fadeIn('slow'); 

logo.delay(500).toggleClass('logo_sticky', direction=='down').fadeIn('slow'); 

（在toggleClass前）

logo.delay(500).fadeIn('slow') 
logo.toggleClass('logo_sticky', direction=='down'); 

（在toggleClass后）

logo.toggleClass('logo_sticky', direction=='down'); 
logo.delay(500).fadeIn('slow') 

说实话，我已经试过每一个组合在我心中大声笑 新版本，我试图这样做也不工作：

$(function() { 
     var nav_container = $(".nav-container"); 
     var nav = $("nav"); 
     var logo = $("logo"); 
     $.waypoints.settings.scrollThrottle = 30; 

     nav_container.waypoint({ 
      handler: function(event, direction) { 
       if (direction == 'down'){ 
        nav_container.css({ 'height':nav.outerHeight() }); 
        nav.addClass('sticky', direction=='down').stop(); 
        logo.css({"visibility":"visible"}).fadeIn("slow"); 
       } 
       else{ 
        nav_container.css({ 'height':'auto' }); 
        nav.removeClass('sticky', direction=='down').stop(); 
        logo.css({"visibility":"hidden"}); 
       } 
       }, 
      offset: function() { 
       return (0); 
      } 
     }); 
    }); 

，但如果我代替淡入把拨动它animes的变化，但在一个坏的方向（IMG出现，然后切换到disapear） 感谢

Answer 1

这似乎是唯一的淡入如果你没有的CSS属性的知名度做工作：隐藏，但显示：无...

你可以做一个element.hide();然后element.fadeIn()。 由于隐藏（）改变页面的布局，因为它消除了它这个项目是我碰到的解决方案：

$(function() { 
    // Do our DOM lookups beforehand 
     var nav_container = $(".nav-container"); 
     var nav = $("nav"); 
     var logo = $("logo"); 
     $.waypoints.settings.scrollThrottle = 30; 

     nav_container.waypoint({ 
      handler: function(event, direction) { 
       if (direction == 'down'){ 
        nav_container.css({ 'height':nav.outerHeight() }); 
        nav.addClass('sticky', direction=='down').stop(); 
        logo.css('opacity',0).animate({opacity:1}, 1000); 
       } 
       else{ 
        nav_container.css({ 'height':'auto' }); 
        nav.removeClass('sticky', direction=='down').stop(); 
        logo.css('opacity',1).animate({opacity:0}, 1000); 
       } 
       }, 
      offset: function() { 
       return (0); 
      } 
     }); 
    }); 

Answer 2

http://api.jquery.com/delay/

http://api.jquery.com/fadein/

使用$(yourLogoSelector).delay(delayAmount).fadeIn();

这里证明它的工作原理http://jsfiddle.net/6d8cf/