title: Javascript Viewport Fade In Fade Out
body: <p>I'm trying to accomplish something so simple it's painful, but I've yet to have luck after hours of work.  </p>
  
  <p>I have 4 divs, each with the class '.slide'.  All I want to do is have them invisible, but fade in when they are in the viewport.  If they leave the viewport, they should return to invisible.  Any ideas?</p>
  
  <pre><code>    $('.slide').waypoint(
      function() {
          if( $(this).is(":in-viewport") ) {
              $(this).animate({
                  opacity: 1
              }, 100);
          }
          $('.slide').not(this).animate({
              opacity: 0
          }, 100);
      },
      {
          offset: function() {
              return $.waypoints('viewportHeight') - document.getElementById('navigation').clientHeight;
          }
      }
  );
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Agdax/3/" rel="nofollow">http://jsfiddle.net/Agdax/3/</a></p>