title: Change specific css styles through .animate()
body: <p>I am currently coding my personal <a href="http://www.raphaellechner.com/demo/variety/" rel="nofollow">website</a> and could really need some help with the jQuery. </p>
  
  <p>I wanted the sticky navigation to change it's background color once it passes the header section, for that I've used the jQuery WayPoint plugin. </p>
  
  <p>Then I defined some special css for the content above and the content under the header section. So far the background and font color changes, the .active class link and the color of the .navbar-brand however doesn't change. </p>
  
  <p>Is something wrong in the following script?</p>
  
  <pre><code>$navbar.find('.navbar-brand').animate({color:'white'},500);
              $navbrand.css({font-weight:"normal"});
  
  $navbar.find('.navbar-brand').animate({color:'white'},500);
              $navbrand.css({font-weight:"normal"});
  </code></pre>
  
  <p>If yes, then I'd really appreciate a explanation why it is not working. </p>
  
  <p>Here is the full code:</p>
  
  <pre><code>$('#navchange').waypoint(function() {
      var $navbar = $("#changenav");
      var $navbrand = $("active &gt; a:focus");
  
      if($(window).scrollTop() &lt; $('#navchange').css("top").replace("px", "")) {
          // Above
          $navbar.animate({backgroundColor:'transparent'},300);
          $navbar.find('a').animate({color:'white'},500);
          $navbar.find('.navbar-brand').animate({color:'white'},500);
          $navbrand.css({font-weight:"normal"});
  
      } else {
          $navbar.animate({backgroundColor:'#FFFFFF'},500);
          $navbar.find('a:link').animate({color:'#1abc9c'},500);
          $navbar.find('.navbar-brand').animate({color:'#1abc9c'},500);
          $navbrand.css({font-weight:"bold"});
  
      }
  
  });
  </code></pre>
  
  <p>And <a href="http://www.raphaellechner.com/demo/variety/" rel="nofollow">here</a> is a link to my website. </p>