How do you animate the value for a jQuery UI progressbar? -
i've setup jquery ui progressbar can't use jquery animate animate it's value. ideas on how make work?
the percentdone
variable holds number 0 100 showing how far along scrollbar should (this works fine).
i've tried several different things no avail. here's have far:
var progressbar = $("#progressbar1").widget(); progressbar.animate({ value: percentdone }, 5000, function() { console.debug('done animating'); });
note if update scrollbar using "value" method works fine jumps value instead of smoothly animating it:
$("#progressbar1").progressbar('value', percentdone);
- demo 1: first one, proof of concept
$(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 sake ;-).
$(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(); // width int // generate random number between our max 100 , it's half 50, // optional, , make bar move , forth before // reach 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 real application may not need generate loop, example, while uploading file, flash aplication tell filesize , let know when have reached max value needed, first code intended demonstrate use of progressbar setter , getter , of course make whole thing play, instance, loop; second 1 adaptation of same concept sugar.
Comments
Post a Comment