title: Fade elements in on scroll with Jquery
body: <p>I am creating a timeline of events on my website, and I am trying to get each element (with a class '.event') to fade in as you scroll down through timeline. I am having issues - they all fade in together at the same time rather than individually.</p>
  
  <p>Any ideas why? Thanks in advance! </p>
  
  <pre><code>$(document).ready(function() {
  
  /* Every time the window is scrolled ... */
  $(window).scroll( function(){
  
      /* Check the location of each desired element */
      $('.event').each( function(i){
  
          var bottom_of_object = $(this).position().top + $(this).outerHeight();
          var bottom_of_window = $(window).scrollTop() + $(window).height();
  
          /* If the object is completely visible in the window, fade it it */
          if( bottom_of_window &gt; bottom_of_object ){
  
              $(this).animate({'opacity':'1'},500);
  
          }
  
      }); 
  
  });
  </code></pre>
  
  <p>});</p>