jquery计数器不起作用

我在我的网站上有2个计数器，当我加载我的页面时，计数。但是当我的屏幕低于800像素宽度。当我加载页面时，它们不会自动启动。jquery计数器不起作用

但是，如果我滚动真的很快到他们位于网站上的位置。他们开始。而全屏他们也很好。而在手机上，他们也工作。

这里是jQuery代码：

if (jQuery('.shortcode_counter').size() > 0) { 
    if (jQuery(window).width() > 760) { 
     jQuery('.shortcode_counter').each(function(){ 
      if (jQuery(this).offset().top < jQuery(window).height()) { 
       if (!jQuery(this).hasClass('done')) { 
        var set_count = jQuery(this).find('.stat_count').attr('data-count'); 
        jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) { 
          var data = Math.floor(now); 
          jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data); 
         } 
        }); 
        jQuery(this).addClass('done'); 
        jQuery(this).find('.stat_count'); 
       } 
      } else { 
       jQuery(this).waypoint(function(){ 
        if (!jQuery(this).hasClass('done')) { 
         var set_count = jQuery(this).find('.stat_count').attr('data-count'); 
         jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) { 
           var data = Math.floor(now); 
           jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data); 
          } 
         }); 
         jQuery(this).addClass('done'); 
         jQuery(this).find('.stat_count'); 
        } 
       },{offset: 'bottom-in-view'}); 
      } 
     }); 
    } 
}

我不是伟大的jQuery。这是我已经尝试了jQuery代码：

if (jQuery(window).width() > 760) {到if (jQuery(window).width() > 0) { Becouse分钟screenwidht可能呢？
if (!jQuery(this).hasClass('done')) {只是完全删除了这条if语句。我认为它确实适用于课堂或其他事情。

下面是HTML：

<div class="row"> 
    <div class="col-sm-6 module_number_5 module_cont pb50 module_counter"> 
     <div class="module_content shortcode_counter breedte-100"> 
      <div class="counter_wrapper"> 
       <div class="counter_content"> 
        <div class="stat_count_wrapper"> 
         <h1 class="stat_count speciale-grote-counter" data-count="{{ records[1].number }}">0</h1> 
        </div> 
        <div class="counter_body"> 
         <h5 class="counter_title speciale-grote-counter-text">{{ records[1].year }}</h5> 
        <div class="stat_temp"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我对这个没有任何线索。所以我想在这里发布。同时我正在努力解决这个问题。

所以如果有人知道这个解决方案。请。

在此先感谢！快乐的编码。

ADITION：

JSFIDDLE新增工作的jsfiddle。问题是。我的错误只发生在计数器最初不在屏幕上时。并在800像素宽度以下。在JSFIDDLE中，它始终在屏幕右侧？

ADITION 2：

我发现了它的确切排。：

jQuery(this).waypoint(function(){ 

},{offset: 'bottom-in-view'});

ADITION 3：

Apparantly一些其他行，我发现了这个问题。我已经把它放在一个答案，但下方也生病这里包括它：

删除：

jQuery(this).waypoint(function(){ 

},{offset: 'bottom-in-view'});

现在工作完全正常。

来源

2017-06-02 H. Brendan

你能提供一个工作的FIDDLE吗？ –

虐待。稍等片刻。 @DavidHope –

@DavidHope添加了jsfiddle –

我不完全确定你的意思是什么“我的错误只发生在计数器最初不在屏幕上时。“

但是难道这就是你要找的人：

https://jsfiddle.net/9q0eLvs1/3/

，我唯一改变的是这一行：

if (jQuery(window).width() > 260) {

更进一步，如果你不需要width()然后你可以简单地删除它，你的代码应该看起来像这样：

if (jQuery('.shortcode_counter').size() > 0) { 

      jQuery('.shortcode_counter').each(function(){ 
       if (jQuery(this).offset().top < jQuery(window).height()) { 
        if (!jQuery(this).hasClass('done')) { 
         var set_count = jQuery(this).find('.stat_count').attr('data-count'); 
         jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) { 
           var data = Math.floor(now); 
           jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data); 
          } 
         }); 
         jQuery(this).addClass('done'); 
         jQuery(this).find('.stat_count'); 
        } 
       } else { 
        jQuery(this).waypoint(function(){ 
         if (!jQuery(this).hasClass('done')) { 
          var set_count = jQuery(this).find('.stat_count').attr('data-count'); 
          jQuery(this).find('.stat_temp').stop().animate({width: set_count}, {duration: 3000, step: function(now) { 
            var data = Math.floor(now); 
            jQuery(this).parents('.counter_wrapper').find('.stat_count').html(data); 
           } 
          }); 
          jQuery(this).addClass('done'); 
          jQuery(this).find('.stat_count'); 
         } 
        },{offset: 'bottom-in-view'}); 
       } 
      }); 

    }

这里是一个没有FIDDLE的宽度（）场景：

https://jsfiddle.net/9q0eLvs1/4/

来源

2017-06-02 08:59:28

我发现它的if（jQuery（this）.offset（）。top

现在更准确。它的这句话： 'jQuery（this）.waypoint（function（）{'和'}，{offset：'bottom-in-view'}）;' –

我找到了问题@David Hope。仍然生病接受你的答案，因为你让我走向正确的方向。所以Upvote和Hook for u：D –

Apparantly正是这种功能：

jQuery(this).waypoint(function(){ 

},{offset: 'bottom-in-view'});

伊夫删除的行并再次运行完美。

来源

2017-06-02 09:58:16

jquery计数器不起作用

回答

相关问题