прогресс Круга бар продолжает цикл

Question

У меня есть сценарий прогресса круга здесь: http://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/

Я добавил его на мой сайт, дело в том, что у меня есть эти элементы вокруг середины страницы (не в режиме просмотра при загрузке страницы). Мое намерение состоит в том, чтобы показать анимацию после того, как пользователь прокручивается до этой позиции, однако эффект продолжает зацикливаться на каждом прокрутке. Как я могу заставить его запускать только один раз, когда элемент попадает в режим просмотра и предотвращает цикл и/или перезапуск?

Вот мой код до сих пор: http://jsfiddle.net/1f58u1o5/1/

CSS

.progressbar { 
    display: inline-block; 
    width: 100px; 
    margin: 25px; 
} 

.circle { 
    width: 100%; 
    margin: 0 auto; 
    margin-top: 10px; 
    display: inline-block; 
    position: relative; 
    text-align: center; 
} 

.circle canvas { vertical-align: middle; } 

.circle div { 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    line-height: 40px; 
    font-size: 20px; 
} 

.circle strong i { 
    font-style: normal; 
    font-size: 0.6em; 
    font-weight: normal; 
} 

.circle span { 
    display: block; 
    color: #aaa; 
    margin-top: 12px; 
} 

HTML

<div style="width:100%;height:500px;"></div> 
<h3>Sed scelerisque</h3> 
<div class="progressbar"> 
    <div class="circle" data-percent="98"><div></div><p>Quisque's</p></div> 
</div> 
<div class="progressbar"> 
    <div class="circle" data-percent="30"><div></div><p>Maecenas</p></div> 
</div> 
<div class="progressbar"> 
    <div class="circle" data-percent="77"><div></div><p>Pellentesque</p></div> 
</div> 
<div class="progressbar"> 
    <div class="circle" data-percent="49"><div></div><p>Etiam sodales</p></div> 
</div> 
<div style="width:100%;height:500px;"></div> 

JavaScript

$(document).ready(function($){ 
    function animateElements(){ 
     $('.progressbar').each(function(){ 
      var elementPos = $(this).offset().top; 
      var topOfWindow = $(window).scrollTop(); 
      var percent  = $(this).find('.circle').attr('data-percent'); 
      var percentage = parseInt(percent, 10)/parseInt(100, 10); 
      if(elementPos<topOfWindow+$(window).height()-30){ 
       $(this).find('.circle').circleProgress({ 
        startAngle: -Math.PI/2, 
        value: percentage, 
        thickness: 14, 
        fill: { color: '#1B58B8' } 
       }).on('circle-animation-progress', function(event,progress,stepValue) { 
        $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%'); 
       }).stop(); 
      } 
     }); 
    } 

    // Show animated elements 
    animateElements(); 
    $(window).scroll(animateElements); 
}); 

Любое предложение s? Спасибо вам большое.

Answer 1

Это jsfiddle: http://jsfiddle.net/edward_lee/1f58u1o5/2/

Добавить атрибут данных на <div class="progressbar"> проверить анимация воспроизводится или нет. Его начальное значение - false, потому что анимация еще не воспроизводится.

<div class="progressbar" data-animate="false">

Добавьте атрибут является ложным условием, если заявление if(elementPos<topOfWindow+$(window).height()-30 && !animate).

После воспроизведения анимации установите для атрибута значение true.

$('.progressbar').each(function(){ 
    var elementPos = $(this).offset().top; 
    var topOfWindow = $(window).scrollTop(); 
    var percent  = $(this).find('.circle').attr('data-percent'); 
    var percentage = parseInt(percent, 10)/parseInt(100, 10); 
    var animate = $(this).data('animate'); 
    if(elementPos<topOfWindow+$(window).height()-30 && !animate){ 
     $(this).data('animate', true); 
     $(this).find('.circle').circleProgress({ 
      startAngle: -Math.PI/2, 
      value: percentage, 
      thickness: 14, 
      fill: { color: '#1B58B8' } 
     }).on('circle-animation-progress', function(event,progress,stepValue) { 
      $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%'); 
     }).stop(); 
    } 
});