你如何为jQuery UI进度条设置animation值？
我已经设置了一个jQuery UI进度条，但不能使用jQueryanimation来为其设置animation值。 任何想法如何使这项工作？
percentDonevariables包含一个从0到100的数字，表示滚动条应该有多远（这个工作正常）。
我尝试了几个不同的东西，无济于事。 以下是我到目前为止：
var progressbar = $("#progressbar1").widget(); progressbar.animate({ value: percentDone }, 5000, function() { console.debug('done animating'); });
请注意，如果我使用“值”方法更新滚动条，它可以正常工作，但是会跳转到该值，而不是平滑地进行animation：
$("#progressbar1").progressbar('value', percentDone);
- DEMO 1：第一个，概念certificate
$(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：为了好的缘故，改编@ 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 */ } });
在一个真实的应用程序中，你可能不需要生成一个循环，例如，在上传文件时，你的Flash应用程序会告诉你文件大小，并告诉你什么时候达到了所需的最大值，所以我的第一个代码是为了演示只是使用进度条setter和getter，当然还有什么使整个事情发挥作用，例如循环; 第二个是与糖相同的概念的适应。
animation与CSS3
使用CSS3，不需要使用JavaScript来直接pipe理进度条的值。 只要添加到你的风格：
.ui-progressbar-value { transition: width 0.5s; -webkit-transition: width 0.5s; }
你可以学习更多关于CSS3转换 。
下面是如何让它顺利地进行animation制作，而不是在@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')
jquery论坛上的一个很好的解决scheme
http://forum.jquery.com/topic/smooth-progressbar-animation
进度条应该初始化，让我们说0.1工作
$("#progressbar .ui-progressbar-value").animate( { width: "67%" }, {queue: false});
写这个插件/方法很容易使任何进度条animation，并为我工作得很好，所以我希望它也适用于其他人。
(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 );
只要将该代码添加到您网页的顶部，并将其作为一个元素使用即可
$('#progressbar').animate_progressbar(value [, duration] [, easing] [, complete] );
编辑：
这是一个缩小版本的代码，加载速度更快。
(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);
这是一个优雅的解决scheme： 增长JQuery进度条
$(function() { $("#progressbar").progressbar({ value: 1 }); $("#progressbar > .ui-progressbar-value").animate({ width: "37%" }, 500); });
以下脚本不只是animation进度条，还会逐步增加/减less显示的％值
// '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)) + '%'); } });
你可以用简单的本地html5进度来做到这一点。
HTML：
<progress id="score-progress-bar" value="10" max="100"></progress>
JS：
$('#score-progress-bar').animate({value: your_value_from_0_to_100}, {duration: time_in_ms, complete: function(){console.log('done!');}});
