滚动上的 Jquery 文本动画

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

更新: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...
}