我有以下 jquery 影片以在 1 秒內遞增數字。
$({ count: 0 }).animate({ count: 12000 }, {
duration: 1000,
easing: 'swing',
step: function() {
let mathCount = Math.ceil(this.count).toLocaleString('en');
$('.my-element').text(mathCount);
},
complete: function() {
console.log('finished')
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="my-element"></span>我也toLocaleString()用來添加十進制逗號。
當我計算像12000它達到11,998或更少的大數字時。為什么會這樣？
如果我將持續時間增加一秒鐘以上，它將起作用。如何在不更改持續時間的情況下達到正確的數字？
uj5u.com熱心網友回復：
查看API的檔案，.animate()我認為答案可能很簡單，因為您沒有將.animate()其用于預期目的。 任何超出記錄范圍的使用都不能保證有效（并且可能不會）。
我這樣說是因為檔案說明.animate()旨在：
執行一組 CSS 屬性的自定義影片。
所有檔案都顯示了作為 CSS 選擇器鏈接的初始物件，而不是任意物件。所有示例還表明，作為第一個 arg 傳遞的屬性將.animate()是有效 CSS 屬性的物件。
特別值得注意的是.step()：
為每個影片元素的每個影片屬性呼叫的函式。此函式提供了修改 Tween 物件以在設定之前更改屬性值的機會。
（重點補充）
基于此讀數，.step僅用于調整值，然后 jQuery 將在內部獲取調整后的值并將其應用于相關元素。但是，您正在繞過此程序，并使用它自己直接操作元素。
如果我不得不冒險猜測，我會說對于影片回圈中的最終更新， step is skipped，因為應該不需要調整，因為 jQuery 假設它只是設定 CSS 的最終最終值。正如問題評論中所述，您可以簡單地使用complete鉤子來設定它，但最終您正在濫用/誤用該.animate()方法，并且在記錄的 API 之外作業時，您可能會因庫更新而出現潛在的行為中斷. 相反，我建議探索一種不同的方法來實作這種效果，這種方法不會利用 jQuery API 的未記錄、意外使用。
（更新：雖然與詢問如何更新文本內容的類似問題的答案不完全重復，但提供了類似的答案......）animate()
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410633.html
標籤：