引导程序中的进度条是跳跃的还是不准确的? (包括小提琴演示)

时间:2015-09-16 02:46:28

标签: javascript jquery html css twitter-bootstrap

所以我今天刚刚发现了bootstrap并开始将他们的UI元素合并到我的web应用程序中。不幸的是,我在进度条方面遇到了一些麻烦。我不知道它是否只是我,但他们看到的是跳跃,不准确和口吃相当多。这是一个小提琴供参考:

https://jsfiddle.net/v255fwkz/2/

如果您点击Run然后Start,至少在我测试的所有浏览器上,第一个完成的速度比第二个快几秒,即使它们都需要10秒钟。此外,最重要的一种是在开始时放大,然后在结束时放慢速度。它的速度并不一样。第三个甚至不起作用。它会在10秒后立即下降。

理想情况下,我想使用顶级版本,因为它更顺畅,但在我的应用程序中,我需要这个有点准确,因为它是一个用户的计时器,所以我担心我将不得不使用底部的。希望我只是在某处弄乱代码或者我错过了一些东西。也许我应该从bootstrap切换到其他东西?

1 个答案:

答案 0 :(得分:4)

不是关于引导程序问题,而是因为你的持续时间低于你的间隔时间而导致:transition: width .6s ease;

另一个重要的事情就是缓和,如果你有一个非线性缓和,那么计时功能会影响结果。 最后,您需要先在$("#second").css("width", value + "%");之前调用第一个间隔。

小提琴:https://jsfiddle.net/v255fwkz/4/