Jquery Textアニメーションをスクロールで表示

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... 
}