title: How to fire jQuery in page view?
body: <p>I want this animation to start when the portion is either selected from the nav bar or is in view on scrolling. <BR> Sample code:<br>HTML:<BR></p>
  
  <pre><code>    &lt;section id="section-skills" class="section appear clearfix"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row mar-bot40"&gt;
                      &lt;div class="col-md-offset-3 col-md-6"&gt;
                          &lt;div class="section-header"&gt;
                              &lt;h2 class="section-heading animated" data-animation="bounceInUp"&gt;Skills&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
                  &lt;div class="row" &gt;
                  &lt;div class="col-md-6"&gt;
  &lt;div class="skillbar clearfix " data-percent="80%"&gt;
      &lt;div class="skillbar-title" style="background: #333333;"&gt;&lt;span&gt;Java&lt;/span&gt;&lt;/div&gt;
      &lt;div class="skillbar-bar" style="background: #525252;"&gt;&lt;/div&gt;
      &lt;div class="skill-bar-percent"&gt;75%&lt;/div&gt;
  &lt;/div&gt; &lt;!-- End Skill Bar --&gt;
  
  &lt;!--REST OF THE CODE FOLLOWS AS IN THE EXAMPLE LINK PROVIDED--&gt;
  
   &lt;/section&gt;
  </code></pre>
  
  <p>I tried using <code>waypoint</code> in jQuery but it's not working.</p>
  
  <pre><code>jQuery(document).ready(function(){
    $('#section-skills').waypoint(function(direction) {  
      jQuery('.skillbar').each(function(){
          jQuery(this).find('.skillbar-bar').animate({
              width:jQuery(this).attr('data-percent')
          },6000);
      });
  });
  });
  </code></pre>
  
  <p>Any solution would be really helpful.</p>