title: Fadein and Fadeout on scroll
body: <p>Im trying to make button which appears if scrollTop > 200 and hide when scrollTop &lt; 200. However i would like the button to fadein and there comes the problem. </p>
  
  <p>Heres my javascript:</p>
  
  <pre><code>$(window).scroll(function(){
    if($(this).scrollTop() &gt; 200) {
      $(".button").removeClass("opacity");
    }
    else {
      $(".button").addClass("opacity");
    };
  </code></pre>
  
  <p>and Css:</p>
  
  <pre><code>.opacity { opacity:0; }
  </code></pre>
  
  <p>With code like this the show/hide function works fine but cant make it to fadein. I also tried changing my jscript to this:</p>
  
  <pre><code>$(window).scroll(function(){
    if($(this).scrollTop() &gt; 200) {
      $(".button").animate({"opacity":"1"}, 1500);
    else {
      $(".button").animate({"opacity":"0"}, 1500);
    };
  </code></pre>
  
  <p>But with this it doesnt work at all.</p>
  
  <p>Last thing I tried was fadeIn and fadeOut property which worked, but then the other buttons under this one changed their position after it showed/hidden (the buttons are position:fixed; scrolling with page), making the effect not really nice..</p>
  
  <p>Any ideas how i could make it to fadein and fadeout?
  Thank you</p>