title: Image fade-in on scroll working for some images but not others
body: <p>I have a page with multiple images on it and I will be adding more, I need the images to fade in as you scroll to them, preferable starting to fade in as you get half way down the image.</p>
  
  <p>First here is what I have so far:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      var container = $(".image").fadeTo(0, 0.0);
  
      $(window).scroll(function() {
          container.each(function(i) {
  
              var windowHeight = $(window).height();
              var viewTop = $(window).scrollTop();
              var viewBottom = viewTop + windowHeight;
  
              var distanceFromTop = $(this).offset().top - viewTop;
              var distanceFromBottom = viewBottom - $(this).offset().top - $(this).height();
  
              var visible = (distanceFromTop + distanceFromBottom) &lt;= windowHeight;
              var allVisible = (distanceFromTop * distanceFromBottom) &gt;= 0;
  
              if (visible) {
                  if (allVisible) {
                      $(this).stop().delay(0).fadeTo(1000, 0.99);
                  } 
                  else {
                      //$(this).stop().delay(0).fadeTo(1000, 0.0);
                  }
              }
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My first problem is that, the third image is not fading-in, sometimes it will, but most of the time it doesn't. The second problem is that I would like the images to fade-in as you get half way down the image, at the moment they fade in when you hit the bottom.</p>
  
  <p>Edit: Forgot to include the demo: <a href="http://zimxtrial.ukbigbuy.com/" rel="nofollow">http://zimxtrial.ukbigbuy.com/</a></p>