Come avviare jQuery in visualizzazione di pagina?

Question

Desidero che l'animazione inizi quando la parte è selezionata dalla barra di navigazione o è in visualizzazione durante lo scorrimento.
Codice di esempio:
HTML:

<section id="section-skills" class="section appear clearfix"> 
      <div class="container"> 
       <div class="row mar-bot40"> 
        <div class="col-md-offset-3 col-md-6"> 
         <div class="section-header"> 
          <h2 class="section-heading animated" data-animation="bounceInUp">Skills</h2> 
    </div> 
</div> 
</div> 
</div> 
<div class="container"> 
       <div class="row" > 
       <div class="col-md-6"> 
<div class="skillbar clearfix " data-percent="80%"> 
    <div class="skillbar-title" style="background: #333333;"><span>Java</span></div> 
    <div class="skillbar-bar" style="background: #525252;"></div> 
    <div class="skill-bar-percent">75%</div> 
</div> <!-- End Skill Bar --> 

<!--REST OF THE CODE FOLLOWS AS IN THE EXAMPLE LINK PROVIDED--> 

</section> 

Ho provato ad utilizzare waypoint in jQuery, ma non funziona.

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); 
    }); 
}); 
}); 

Qualsiasi soluzione sarebbe davvero utile.

Answer 1

Utilizzare .position(). Top per ottenere la posizione superiore di .skillbar.

quindi utilizzare il .scroll() evento per ottenere la posizione corrente della finestra viene fatto scorrere a utilizzare .scrollTop(). ValueOf().

Quando il valore .scrollTop è abbastanza vicino alla posizione superiore di .skillbar, l'elemento deve essere visibile, quindi è possibile impostarlo come condizione per quando richiamare l'animazione.

jQuery(document).ready(function(){ 
    var skillBarTopPos = jQuery('.skillbar').position().top; 
    jQuery(document).scroll(function(){ 
    var scrolled_val = $(document).scrollTop().valueOf(); 
    if(scrolled_val>skillBarTopPos-250) startAnimation(); 
    }); 

    function startAnimation(){ 
    jQuery('.skillbar').each(function(){ 
     jQuery(this).find('.skillbar-bar').animate({ 
     width:jQuery(this).attr('data-percent') 
     },6000); 
    }); 
    }; 

}); 

http://api.jquery.com/position/

How to detect scroll position of page using jQuery

http://api.jquery.com/scrollTop/#scrollTop2

Answer 2

Usa jQuery Appear repository per avviare l'animazione quando gli elementi sono in finestra.

Ecco il codice di esempio

HTML:

<!-- Progress Bars --> 
<div class="skills-wrap"> 
    <div class="container"> 
     <!-- Blue progress bars --> 
     <h1 class="text-center">BLUE PROGRESS BARS</h1> 
     <div class="skills progress-bar1"> 
      <ul class="col-md-6 col-sm-12 col-xs-12"> 
       <li class="progress"> 
        <div class="progress-bar" data-width="85"> 
         Wordpress 85% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="65"> 
         Graphic Design 65% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="90"> 
         HTML/CSS Design 90% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="60"> 
         SEO 60% 
        </div> 
       </li> 
      </ul> 
      <ul class="col-md-6 col-sm-12 col-xs-12 wow fadeInRight"> 
       <li class="progress"> 
        <div class="progress-bar" data-width="75"> 
         Agencying 75% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="95"> 
         App Development 95% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="70"> 
         IT Consultency 70% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="90"> 
         Theme Development 90% 
        </div> 
       </li> 
      </ul> 
     </div> 
     <!-- /Blue progress bars --> 
    </div> 
</div> 

Il CSS:

.progress { 
    height: 35px; 
    line-height: 35px; 
    margin-bottom: 45px; 
    background: #fff; 
    border-radius: 0; 
    box-shadow: none; 
    list-style: none; 
} 

.progress-bar { 
    font-weight: 600; 
    line-height: 35px; 
    padding-left: 20px; 
    text-align: left; 
} 

.progress-bar1 .progress-bar { 
    background: #026ea6; 
} 

Script:

jQuery(document).ready(function() { 

/*----------------------------------------------------*/ 
/* Animated Progress Bars 
/*----------------------------------------------------*/ 

    jQuery('.skills li').each(function() { 
     jQuery(this).appear(function() { 
      jQuery(this).animate({opacity:1,left:"0px"},800); 
      var b = jQuery(this).find(".progress-bar").attr("data-width"); 
      jQuery(this).find(".progress-bar").animate({ 
      width: b + "%" 
      }, 1300, "linear"); 
     }); 
    }); 

}); 

La dimostrazione dal vivo è qui a Bootstrap Animated Progress Bar

Answer 3

Qui si va. Ho creato una nuova penna Progress Bars

Tutto ciò che dovete fare è usare questo script per eseguire l'animazione quando appare nella finestra.

jQuery(document).ready(function(){ 
    jQuery('.skillbar').each(function(){ 
     jQuery(this).appear(function() { 
      jQuery(this).find('.skillbar-bar').animate({ 
       width:jQuery(this).attr('data-percent') 
      },6000); 
     }); 
    }); 
}); 

E non dimenticare di aggiungere lo script jQuery Appear sul tuo sito. Se hai ancora problemi, fammi sapere.