Question

我构建了这个数字计数器脚本，当它们在视口中时，它会将数字计算到目标。不幸的是，由于某种原因，他们也被倒计时了。

$(window).scroll(function(){
  // This is then function used to detect if the element is scrolled into view
  function elementScrolled(elem)
  {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
  }

  // This is where we use the function to detect if ".numbers" is scrolled into view
  if(elementScrolled('.numbers')) {

$('.arv').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'linear',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

  }
});

这里是JSFiddle：http://jsfiddle.net/tw6g2oeu/325/

我怎么能阻止该功能倒计时？

修改

使用jQuery Waypoints插件结束：

jQuery('.numbers').waypoint(function() {
  $('.arv').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'linear',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
this.destroy()
},{offset:'75%'});

this.destroy（）;方法可以防止它多次触发。

Answer 1

因为您添加了jQuery标记。你可以使用jQuery waypoint插件。它会为你完成这项工作。

<强> USAGE：

$('.entry').waypoint(function() {
   alert('You have scrolled to an entry.'); \\ increment your counter here
});

Jquery数量计数器只有一次

1 个答案: