jQuery动画在元素在屏幕上时启动，而不是在加载页面时启动

Question

我有一个计数数字动画。

这是代码

jQuery('.count').each(function() { 
     jQuery(this).prop('Counter',0).animate({ 
      Counter: jQuery(this).text() 
     }, { 
      duration: 5000, 
      easing: 'swing', 
      step: function (now) { 
       jQuery(this).text(Math.ceil(now)); 
      } 
     }); 
    }); 

但动画运行时，页面加载和内容是不可见的。 我该怎么做？

编辑：更具体的问题。

我的内容位于屏幕中间，这意味着我必须在页面上滚动以查看我的内容。那么我的问题是： 我该如何让我的脚本动画延迟到屏幕上的内容是 ？

Answer 1

乍一看，我会说你需要等待文档就绪，以便它不会操纵控件，直到一切都被加载。

请参见：https://learn.jquery.com/using-jquery-core/document-ready/

应该是这样的。

// Shorthand for $(document).ready() 
$(jQuery('.count').each(function() { 
    jQuery(this).prop('Counter',0).animate({ 
     Counter: jQuery(this).text() 
    }, { 
     duration: 5000, 
     easing: 'swing', 
     step: function (now) { 
     jQuery(this).text(Math.ceil(now)); 
     } 
    }); 
    }); 
); 

Answer 2

我认为你正在寻找一个懒惰的加载动画。不知道，但this plugin可能会帮助你。