Javascript 使用animate（）JQUERY获取进度

这是spinet：

$('#processing .progress-bar').animate({'width':'60%'},4000);

是否可以通过函数显示毫秒的倒计时方式

例如，我希望能够显示：

4000
3000
2000
1000
0000

---

然后函数停止

查看@Banana的解决方案后，我意识到我完全忘记了

步骤

函数和新的（ish）

进度

函数，这两个函数都可以传递给

。animate

。下面是我更新的解决方案，为了避免混淆，我删除了另一个

var$steps=$（“#steps”）；
$（'#processing.progress bar'）。设置动画({
“宽度”：“60%”
}, {
持续时间：4000，
进度：功能（prom、prog、rem）{
$steps.html（“Prog:+Prog+”
Rem:+Rem）；
}
});
#处理{
宽度：80%；
利润率：5%；
边框：2件纯黑；
高度：25px；
}
#处理。进度条{
身高：100%；
背景：石灰；
宽度：0；
}


var持续时间=4000，
间隔=1000，
pbar=$（“#processing.progress bar”）；
pbar.text（持续时间）；
var cd=setInterval（函数（）{
持续时间-=间隔；
pbar.text（持续时间）；
}，间隔）；
动画（{'width'：'60%}，持续时间，函数（）{
清除间隔（cd）；
pbar.text（'0000'）；
});
。进度条{
背景色：黑色；
颜色：白色；
}

pBar
您可以向jquery动画添加一个
步骤
函数，并在内部计算动画完成的剩余时间：


$（函数（）{
var现在=0；
var animationDuration=4000；
var DesiredWidth=“200”；
$（“.test”）.animate({
宽度：所需宽度
}, {
放松：“线性”，
持续时间：动画持续时间，
//步骤回调函数中的参数将保留
//动画属性的当前位置-在本例中为宽度。
步骤：函数（currentWidth，fx）{
现在=数学圆（（100/期望宽度）*当前宽度）；
$（“.ms_span”）.text（现在为+“%”）；
}
});
});
div{
宽度：0；
高度：100px；
显示：块；
背景：紫色；
位置：相对位置；
}


百分比：
您想显示1%2%3%吗？是的，最好显示。谢谢这是一种你想要的方法，我会在一秒钟内发布一个例子，我会等待我的答案帮助你这是一个很好的方法，但是你在回调函数中调用函数clearInterval，该函数只会在动画结束时执行。我将在文档中查看进度。我将暂时不回答这个问题，等待一个完整的答案。感谢在回调中调用
clearInterval
的原因是该间隔应与动画同时运行。当动画结束时，它会停止间隔的继续。实际上，它并没有通知您动画中的某个步骤，而是将其想象成一个有秒表的人，在您告诉它时计算它需要多长时间并打印一条消息。函数intrvl（）与主函数本身几乎同时执行。我将实施它，并告诉你它是如何进行的。谢谢你尖锐的回答没问题。实际上，我有点搞砸了，忘记了可以作为参数传递的
步骤
和
进度
函数。看到@banana的答案后，我记起了。香蕉使用了
step
函数，所以我在我的中使用了
progress
函数。它相对较新，实际上内置了对计算进度和剩余时间的支持。+1，我也完全忘记了进度：）htanks是答案，但函数clearInterval声明在哪里？它是setInterval的一个表亲，它是内置的。好的，谢谢，我在手册中找到了它，我将实施并验证答案。感谢您的尖锐回答，我将实施并验证答案。@欢迎您。但是请注意，我在步长函数中计算错了时间，您需要做的就是正确计算时间，但要点是一样的。+1真棒的答案！我简直不敢相信我忘记了
步骤
和
进度
。由于您使用了
步骤
@william.eyidi，我更新了我的答案，以使用
进度
，以显示您想要的百分比