jQuery 页面改进

Question

我一直在尝试添加 CSS3 样式和所有内容。

http://daokun.webs.com/jQuery/Progress.html

进度条是由 Makotosan 提供给我的，而使用 CSS3 制作流畅动画的想法是由 MorrisLiang 提供的

我用这个网站在栏上创建了一个对 Angular 线动画，细节和颜色都在变化。按钮也一样。

http://www.catswhocode.com/blog/how-to-create-a-kick-ass-css3-progress-bar

现在我对此非常满意，结果非常好，但令我困扰的是当条形图从 0% 变为任何值时，反之亦然，它立即消失。 CSS3 过渡适用于宽度女巫工作得很好，但当条变为 0% 时，它不再适用于宽度，而是适用于显示样式。它从 display:block 传递到 display:none 女巫让它立即消失。无论如何，有没有办法让这个位顺利地达到 0%，或者我只能忍受酒吧立即变空？

另一件事，从上面显示进度条的网站，我想在进度条上有一个文本显示它的当前百分比。不在中间，就像在遵循值栏并且值平滑变化的网站中。

如果需要，这是 CSS 页面:http://daokun.webs.com/jQuery/myUi.custom.css

至于 HTML View Source 应该就够了。

Answer 1

在您的源代码中，该位表示:

progress.progressbar('value', progress.progressbar('value') - 5);

更改为:

if(progress.progressbar('value') == 5) {
    progress.animate({width: '0%'}, 200);
} else {
    progress.progressbar('value', progress.progressbar('value') - 5);
}

还有一点:

progress.progressbar('value', progress.progressbar('value') + 5);

应该改为:

if(progress.progressbar('value') == 0) {
    progress.animate({width: '5%'}, 200);
} else {
    progress.progressbar('value', progress.progressbar('value') + 5);
}

对于不断变化的值，您希望使用使用 setTimeout 的自执行函数(不是 setInterval，因为它不会等待对函数的一次调用在下一次调用之前完成)。此函数会将跨度的值设置为进度条的当前宽度 - 而不是我认为的进度条值，即使它在宽度方向上介于两个值之间，它也只会返回您上次将其设置为的值(即 5 的倍数)。

您还想在上述动画函数的回调中设置进度条的值，但请注意，当从 0 到 5 设置动画时，您需要设置 progress.find(".ui- progressbar-value").css({display: "block"}).我不能给你所有的答案，所以我会让你自己想办法修改它。