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

我认为你正在寻找一个懒惰的加载动画。不确定，但this plugin可能会对您有所帮助。

Answer 2

乍一看，我会说你需要等待Document Ready，以便它不会操纵控件直到所有内容都被加载。

请参阅：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));
      }
    });
  });
);

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

2 个答案: