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可能會幫助你。