更新迭代的jQuery道具计数器

Question

我使用了jQuery prop-method和counter-property来创建一个动画，从0到.count-string到each-loop的值。

这按预期工作，但我想分别增加这个值3,2和1，由变量cowsIncrement,sheepIncrement和pigsIncrement设置。每个增量也必须以3,2和1秒的间隔发生(类似于增量值)，并且它必须在相同的动画中无限运行。我该怎么做呢?

有人能从jQuery/香草Js提供解决方案吗?

// #count1
let cowsIncrement = 3;
// #count2
let sheepIncrement = 2;
// #count3
let pigsIncrement = 1;
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1500,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toLocaleString('de-DE'));
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="count" id="count1">3000</div><span>cows</span>
<div class="count" id="count2">2000</div><span>sheep</span>
<div class="count" id="count3">1000</div><span>pigs</span>

Answer 1

使用一个对象将元素id映射到相应的增量。然后使用complete:函数开始重复动画3秒钟时间,适当的增加。

让动画在最后重复的关键是使用一个命名函数，这样它就可以在complete:选项中调用自己。

// #count1
let cowsIncrement = 3;
// #count2
let sheepIncrement = 2;
// #count3
let pigsIncrement = 1;
const increments = {
count1: cowsIncrement,
count2: sheepIncrement,
count3: pigsIncrement
};
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1500,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toLocaleString('de-DE'));
},
complete: repeatAnimation
});
});
function repeatAnimation() {
let increment = increments[this.id];
let current = Number($(this).prop('Counter'));
console.log(this.id, current, increment);
$(this).animate({
Counter: current + increment
}, {
duration: 3000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toLocaleString('de-DE'));
},
complete: repeatAnimation
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="count" id="count1">3000</div><span>cows</span>
<div class="count" id="count2">2000</div><span>sheep</span>
<div class="count" id="count3">1000</div><span>pigs</span>