title: Jquery animate div opacity on scroll
body: <p>So I'm trying to animate a css property based on scrolling the browser window.
  the code below works so far, but I'd like it to have a transition instead of just abruptly snapping from an opacity of 1 to an opacity of 0.5. any help is appreciated.  thanks in advance.</p>
  
  <pre><code>$(document).ready(function(){
  $(window).scroll(function(){
      if ($(window).scrollTop() &gt; 50){
          $('.header').css('background','rgba(200, 54, 54, 0.5)');
      }
      else if ($(window).scrollTop() &lt; 50){
          $('.header').css('background','rgba(200, 54, 54, 1)');
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Here is a <a href="http://jsfiddle.net/mpoisel/XXjZW/" rel="nofollow">jsfiddle</a> link to the code so far </p>