JQuery Text Animation On Scroll

Question

Успешно: Я могу оживить текст, когда прокручивается div.

Задача: 1. Он подсчитывает, а затем возвращается вниз. Мне нужно, чтобы он подсчитывал только один раз и останавливался. 2. Мне нужны номера по умолчанию при загрузке страницы на 0. В настоящее время они загружаются на целевой номер и сбрасываются до нуля, когда прокручивается div.

Вот код ...

JQuery:

$(window).scroll(function() { 
    var hT = $('#scroll-to').offset().top, 
     hH = $('#scroll-to').outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    console.log((hT-wH) , wS); 
    if (wS > (hT+hH-wH)){ 
$('.count').each(function() { 
    $(this).prop('Counter',0).animate({ 
     Counter: $(this).text() 
    }, { 
     duration: 4000, 
     easing: 'swing', 
     step: function (now) { 
      $(this).text(Math.ceil(now));  
     } 
    }); 
}); 
     } 
}); 

HTML

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<div id="scroll-to"> 
<div id="shiva"><span class="count">200</span></div> 
<div id="shiva"><span class="count">1000</span></div> 
<div id="shiva"><span class="count">853</span></div> 
<div id="shiva"><span class="count">154</span></div> 
<div id="shiva"><span class="count">10</span></div> 
<div id="shiva"><span class="count">87</span></div> 
<div style="clear:both"></div> 
<div id="talkbubble"><span class="count">1421</span></div> 
<div id="talkbubble"><span class="count">145</span></div> 
<div id="talkbubble"><span class="count">78</span></div> 
<br /> 
<br /> 
<br /> 
</div> 

CSS

#shiva 
{ 
    width: 100px; 
    height: 100px; 
    background: red; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
    float:left; 
    margin:5px; 
} 
.count 
{ 
    line-height: 100px; 
    color:white; 
    margin-left:30px; 
    font-size:25px; 
} 
#talkbubble { 
    width: 120px; 
    height: 80px; 
    background: red; 
    position: relative; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius:   10px; 
    float:left; 
    margin:20px; 
} 
#talkbubble:before { 
    content:""; 
    position: absolute; 
    right: 100%; 
    top: 26px; 
    width: 0; 
    height: 0; 
    border-top: 13px solid transparent; 
    border-right: 26px solid red; 
    border-bottom: 13px solid transparent; 
} 

.linker 
{ 
    font-size : 20px; 
    font-color: black; 
} 

UPDATE: JSFiddle

Любая помощь, которую вы можете предоставить, была бы весьма признательна. Спасибо.

Answer 1

Я хотел бы предложить добавить 0 к начальной разметке и мишени для атрибута данных

Что-то вроде этого:

$('.count').each(function() { 
 
    var target = $(this).attr('data-target'); 
 
    $(this).animate({ 
 
     Counter: target 
 
    }, { 
 
     duration: 4000, 
 
     easing: 'swing', 
 
     step: function (now) { 
 
      $(this).text(Math.ceil(now));  
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="shiva"><span class="count" data-target="200">0</span></div> 
 
<div id="shiva"><span class="count" data-target="1000">0</span></div>

также добавить флаг ваших условный, чтобы избежать запуск множительного счетчика, который, как я предполагаю, вызывает первый выпуск:

var runCounter = true; 
if (wS > (hT+hH-wH) && runCounter){ 
runCounter = false; 
// rest of the code... 
}