您如何为 jQuery UI 进度条设置动画值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5047498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you animate the value for a jQuery UI progressbar?
提问by Julian
I've setup a jQuery UI progressbar but can't use jQuery animate to animate it's value. Any ideas on how to make this work?
我已经设置了一个 jQuery UI 进度条，但不能使用 jQuery animate 为其值设置动画。关于如何使这项工作的任何想法？
The percentDonevariable holds a number from 0 to 100 showing how far along the scrollbar should be (this works fine).
该percentDone变量包含一个从 0 到 100 的数字，显示滚动条应该有多远（这很好用）。
I've tried several different things to no avail. Here's what I have so far:
我尝试了几种不同的方法都无济于事。这是我到目前为止所拥有的：
var progressbar = $("#progressbar1").widget();
progressbar.animate({
value: percentDone
}, 5000, function() {
console.debug('done animating');
});
Note that if I update the scrollbar using the "value" method it works fine but it jumps to that value instead of smoothly animating to it:
请注意，如果我使用 "value" 方法更新滚动条，它工作正常，但它会跳转到该值，而不是平滑地为其设置动画：
$("#progressbar1").progressbar('value', percentDone);
回答by Luca Filosofi
- DEMO 1:the first one, proof of concept
- DEMO 1：第一个，概念证明
$(function() {
var pGress = setInterval(function() {
var pVal = $('#progressbar').progressbar('option', 'value');
var pCnt = !isNaN(pVal) ? (pVal + 1) : 1;
if (pCnt > 100) {
clearInterval(pGress);
} else {
$('#progressbar').progressbar({value: pCnt});
}
},10);
});
- DEMO 2:: adaptation of @Peter's response below for the good sake ;-).
- 演示 2 :: 出于好意，改编@Peter 在下面的回复;-)。
$(function() {
$('#progressbar').progressbar(); // inizializa progressbar widget
$pVal = $('.ui-progressbar-value').addClass('ui-corner-right');
var pGress = setInterval(function() { //generate our endless loop
var pCnt = $pVal.width(); // get width as int
// generate a random number between our max 100 and it's half 50,
// this is optional, and make the bar move back and forth before
// we reach the end.
var rDom = Math.floor(Math.random() * (100 - 50 + 1) + 50);
var step = rDom >= 100 ? 100: rDom; // reached our max ? reset step.
doAnim(step);
},1000);
var doAnim = function(wD) {
// complete easing list http://jqueryui.com/demos/effect/easing.html
$pVal.stop(true).animate({width: wD + '%'},1000, 'easeOutBounce');
if (wD >= 100) clearInterval(pGress) /* run callbacks here */
}
});
In a real application you may not need to generate a loop, for example, while uploading a file, your flash aplication will tell you the filesize and let you know when you have reached the max value needed, so my first code is intended to demonstrate just the use of the progressbar setter and getter and of course what make the whole thing play, that is for instance, the loop; the second one is an adaptation of the same concept with sugar.
在实际的应用程序中，您可能不需要生成循环，例如，在上传文件时，您的 Flash 应用程序会告诉您文件大小并在达到所需的最大值时通知您，因此我的第一个代码旨在演示只是使用进度条 setter 和 getter，当然还有让整个事情发挥作用的东西，例如循环；第二个是对糖的相同概念的改编。
回答by Mikhail
Animation with CSS3
使用 CSS3 制作动画
With CSS3 there is no need to utilize JavaScript to manage the value of the progress bar directly. Just add this to your style:
使用 CSS3，无需使用 JavaScript 直接管理进度条的值。只需将此添加到您的样式中：
.ui-progressbar-value {
transition: width 0.5s;
-webkit-transition: width 0.5s;
}
You can learn more about CSS3 Transitions.
您可以了解有关CSS3 过渡的更多信息。
回答by Peter
Here is how to get it to animate smoothly, rather than the somewhat jerky way suggested in the currently accepted answer of @aSeptik. It bypasses the .progressbar('value, ...)method.
以下是如何让它顺利动画，而不是@aSeptik 目前接受的答案中建议的有点生涩的方式。它绕过了该.progressbar('value, ...)方法。
// On load, make the progressbar inside always have round edges:
// (This makes it look right when 100%, and seems nicer all the time to me.)
$("#progressbar .ui-progressbar-value").addClass("ui-corner-right");
new_width = "50px"; // you will need to calculate the necessary width yourself.
$("#progressbar .ui-progressbar-value").animate({width: new_width}, 'slow')
回答by fred_
a very good solution on jquery forum
jquery论坛上一个很好的解决方案
http://forum.jquery.com/topic/smooth-progressbar-animation
http://forum.jquery.com/topic/smooth-progressbar-animation
the progressbar should be initialized with let's say 0.1 to work
应该用 0.1 来初始化进度条才能工作
$("#progressbar .ui-progressbar-value").animate(
{
width: "67%"
}, {queue: false});
回答by Brian Leishman
Wrote this plugin/method to very easily animate any progressbar, and works very well for me, so I hope it does for everyone else, too.
编写这个插件/方法可以非常轻松地为任何进度条设置动画，并且对我来说效果很好，所以我希望它也适用于其他所有人。
(function( $ ) {
$.fn.animate_progressbar = function(value,duration,easing,complete) {
if (value == null)value = 0;
if (duration == null)duration = 1000;
if (easing == null)easing = 'swing';
if (complete == null)complete = function(){};
var progress = this.find('.ui-progressbar-value');
progress.stop(true).animate({
width: value + '%'
},duration,easing,function(){
if(value>=99.5){
progress.addClass('ui-corner-right');
} else {
progress.removeClass('ui-corner-right');
}
complete();
});
}
})( jQuery );
Just add that code to the top of your page anywhere and use it on an element as such
只需将该代码添加到页面顶部的任何位置，然后在元素上使用它
$('#progressbar').animate_progressbar(value [, duration] [, easing] [, complete] );
EDIT:
编辑：
Here's a minified version of the code, makes it load a bit faster.
这是代码的缩小版本，使其加载速度更快。
(function(a){a.fn.animate_progressbar=function(d,e,f,b){if(d==null){d=0}if(e==null){e=1000}if(f==null){f="swing"}if(b==null){b=function(){}}var c=this.find(".ui-progressbar-value");c.stop(true).animate({width:d+"%"},e,f,function(){if(d>=99.5){c.addClass("ui-corner-right")}else{c.removeClass("ui-corner-right")}b()})}})(jQuery);
回答by Jake Smith
Here is an elegant solution: Growing Jquery Progress Bars
这是一个优雅的解决方案：Growing Jquery Progress Bars
$(function() {
$("#progressbar").progressbar({
value: 1
});
$("#progressbar > .ui-progressbar-value").animate({
width: "37%"
}, 500);
});
回答by Sagiv Ofek
you can do it with simple native html5 progress.
html:
您可以使用简单的原生 html5 进度来完成。
html：
<progress id="score-progress-bar" value="10" max="100"></progress>
js:
js：
$('#score-progress-bar').animate({value: your_value_from_0_to_100}, {duration: time_in_ms, complete: function(){console.log('done!');}});
回答by pinkal vansia
Following script not just animates progressbar but also increase/decrease displayed %values step by step
以下脚本不仅可以为进度条设置动画，还可以逐步增加/减少显示的 %values
// 'width' can be any number
$('#progressbar .ui-progressbar-value').animate(
{
width: width + '%'
},
{
duration: 3000,
step: function (now, fx) {
$('.leftvalue').html(parseInt(now) + '%');
$('.rightvalue').html((100 - parseInt(now)) + '%');
}
});
