title: JQuery - Detect if element is fully in viewport
body: <p>I'm trying to use <a href="https://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=2&amp;cad=rja&amp;ved=0CDUQFjAB&amp;url=https%3A%2F%2Fgithub.com%2Fpatik%2Fwithin-viewport&amp;ei=yTZkUoiPKYfpigKv2oDoBw&amp;usg=AFQjCNHjl2WKy5gm7o7mI07y0U5P_MmcyQ&amp;sig2=MmTdf-WOnV5aGKW3p2QiyQ&amp;bvm=bv.54934254,d.cGE" rel="nofollow">this plugin</a> to execute an animation when if an element is fully visible in the viewport; kind of like a lightbox effect. It somewhat responsive ... but moreso not. Not sure if I'm using the right approach. Any ideas?</p>
  
  <pre><code>$(window).bind("resize mousewheel scroll scrollStop", function() {
  if($(".tailor .content").is(":within-viewport")) {
      $(".tailor").animate({opacity:'1.0'}, 900, 'easeInOutQuart');
  }
  else {
      $(".tailor").animate({opacity:'0.8'}, 900, 'easeInOutQuart');
  }
  });
  </code></pre>