我正在尝试向我的网站添加一个简单的 javascript 进度条,我发现了一些脚本,但我总是遇到同样的问题 - 我能够初始化加载程序并将其设置为递增到给定值,但不能分步进行。这是一个简单的例子 - https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/
最后有:
bar.animate(1.0);
我怎样才能让它逐步动画化?假设先达到 50%,然后(2 秒后)达到 75%,然后达到 100%。我试过了
bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);
以及:
setTimeout(function(){bar.animate(0.5)}, 2000);
setTimeout(function(){bar.animate(0.75)}, 2000);
setTimeout(function(){bar.animate(1)}, 2000);
但它总是选择最后一个(最高)值,而不是按步骤进行动画处理。任何建议均已采纳。
最佳答案
bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);
上面的代码同时运行,最后一个代码会覆盖其他代码。
setTimeout(function(){bar.animate(0.5); console.log("animate")}, 2000);
console.log('timeout 1 called');
setTimeout(function(){bar.animate(0.75); console.log("animate")}, 2000);
console.log('timeout 2 called');
setTimeout(function(){bar.animate(1); console.log("animate")}, 2000);
console.log('timeout 3 called');
一旦设置了第一个超时,它就不会等待延迟再设置下一个超时。检查控制台上的日志,看看发生了什么。
问题是这些脚本同时运行。做这样的事情(或更好的事情):
bar.animate(0.5); // Number from 0.0 to 1.0
setTimeout(function () {
bar.animate(0.75);
}, 2000);
setTimeout(function () {
bar.animate(1.0);
}, 4000);
如果您只是想按顺序对栏进行动画处理,您也可以使用 CSS 制作关键帧。
关于javascript - 如何增加javascript进度条的进度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39922127/