title: Fade in/fade out with opacity transition doesn't work as expected
body: <p>Here's my code:</p>
  
  <pre><code>$(document).ready(function () {
  
      $("#back-top").hide();
  
      $(function () {
          $(window).scroll(function () {
              if ($(this).scrollTop() &gt; 100) {
                  $('#back-top').fadeIn();
              } else {
                  $('#back-top').fadeOut();
              }
          });
      });
  });
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#back-top
  {
      opacity: 0.6;
      transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -webkit-transition: opacity 1s ease-in-out;
  }
  
  #back-top:hover
  {
      opacity: 1.0;
      transition: opacity .55s ease-in-out;
      -moz-transition: opacity .55s ease-in-out;
      -webkit-transition: opacity .55s ease-in-out;
  }
  </code></pre>
  
  <p>So here's the problem: when I combine my CSS and jQuery like this the <code>#back-top</code> element won't fade in nor fade out when needed to. It would just appear out of nothing at the moment the scroll function triggers without any effects. So if I remove the CSS the fade in/fade out works. How to combine both portions of code so that when the element fades in, it fades only to <code>opacity: 0.6;</code> and then stops. When hovered it should have <code>opacity: 1;</code> and still being able to fade out when out of the range of the scroll function. I think there must be a CSS only way, with jQuery just adding the classes when the function activates... But I haven't figured it out yet...</p>