title: Run Jquery only when an element is in the viewport
body: <p>I'm trying to perform the Jquery function below when the element becomes visible in the viewport rather than on the page load.  What would I need to change to allow that to happen?  I'm using an external JS file to perform the Jquery, so keep that in mind.</p>
  
  <p>Here's a piece of the HTML that is associated with the Jquery function - </p>
  
  <pre><code>          &lt;div class="skillbar clearfix " data-percent="70%"&gt;
              &lt;div class="skillbar-title" style="background: #FF704D;"&gt; 
                    &lt;span&gt;Illustrator&lt;/span&gt;&lt;/div&gt;
              &lt;div class="skillbar-bar" style="background: #FF704D;"&gt;&lt;/div&gt;
              &lt;div class="skill-bar-percent"&gt;70%&lt;/div&gt;
            &lt;/div&gt;
  
  
   jQuery(document).ready(function(){
    jQuery('.skillbar').each(function(){
      jQuery(this).find('.skillbar-bar').animate({
          width:jQuery(this).attr('data-percent')
      },4000);
     });
   });
  </code></pre>