title: Run animation when element is visible on screen
body: <p>I've a little progress bars script. It works fine but runs on page load. I want to run animation when bars are visible on screen (it should work too if progress bars would be in tabs). How may I get this?</p>
  
  <p>Here's script:</p>
  
  <pre><code>setTimeout(function(){
  
      $('.skill-bar .skill-bar-content').each(function() {
          var me = $(this);
          var perc = me.attr("data-percentage");
  
          var current_perc = 0;
  
          var progress = setInterval(function() {
              if (current_perc&gt;=perc) {
                  clearInterval(progress);
              } else {
                  current_perc +=1;
                  me.css('width', (current_perc)+'%');
              }
  
              me.text((current_perc)+'%');
  
          }, 10);
  
      });
  
  },10);
  </code></pre>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/fUyYL/" rel="nofollow">http://jsfiddle.net/fUyYL/</a></p>